Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Slideshow Slider [JQuery & HTML]

Options
  • 02-12-2013 8:03pm
    #1
    LostBoy101
    Registered Users Posts: 2,369 ✭✭✭


    Hey lads I managed to my slideshow working with CSS but I want to ensure that it slides automically.

    I've taken the code from a comment section of the website I got the code from. (It's on page 3 of the comments section halfway)

    http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/

    Apparently I added in the JQuery code into the head section so I presume I'm missing plugins?

    Here is a live verision of my website. It's on the homepage.

    P.S It's a 1st year college project.

    HTML code

    <html>
    <head>
    <title></title>
    <!-- Slider -->

    <link href="css/style-slideshow.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="http://code.jquery.com/jquery latest.min.js"></script>

    <script type="text/javascript" src="JavaScript/Slider.js"></script>

    </head>
    <body>

    <!-- Start of Slideshow -->

    <section class="cr-container">

    <script src="JavaScript/Slider.js"></script>

    <!-- radio buttons and labels -->
    <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
    <label for="select-img-1" class="cr-label-img-1"></label>

    <input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
    <label for="select-img-2" class="cr-label-img-2"></label>

    <input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
    <label for="select-img-3" class="cr-label-img-3"></label>

    <input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
    <label for="select-img-4" class="cr-label-img-4"></label>

    <!-- Panels -->

    <div class="clr"></div>
    <div class="cr-bgimg">
    <div>
    <span>Slice 1 - Image 1</span>
    <span>Slice 1 - Image 2</span>
    <span>Slice 1 - Image 3</span>
    <span>Slice 1 - Image 4</span>
    </div>
    <div>
    <span>Slice 2 - Image 1</span>
    <span>Slice 2 - Image 2</span>
    <span>Slice 2 - Image 3</span>
    <span>Slice 2 - Image 4</span>
    </div>
    <div>
    <span>Slice 3 - Image 1</span>
    <span>Slice 3 - Image 2</span>
    <span>Slice 3 - Image 3</span>
    <span>Slice 3 - Image 4</span>
    </div>
    <div>
    <span>Slice 4 - Image 1</span>
    <span>Slice 4 - Image 2</span>
    <span>Slice 4 - Image 3</span>
    <span>Slice 4 - Image 4</span>
    </div>
    </div>

    <!-- Titles -->
    <div class="cr-titles">
    <h3>
    <span></span>
    <span>Welcome to Nolans Merecedes-Benz Garage</span>
    </h3>

    <h3>
    <span></span>
    <span>New SLS AMG "Where speed matters"</span>
    </h3>
    <h3>
    <span></span>
    <span>New S-Saloon "The Business Car"</span>
    </h3>
    <h3>
    <span></span>
    <span>New A-Class "Drive with style"</span>
    </h3>
    </div>

    </section>

    <!-- End of Slideshow -->
    </body>
    </html>

    JQuery Code

    var $j = jQuery.noConflict();
    var i = 2; // First image switch to second image

    function switchImage()
    {
    $j(“.current”).removeAttr(‘checked’);
    $j(“.current”).removeClass(‘current’);

    $j(“#select-img-”+i).addClass(‘current’);
    $j(“#select-img-”+i).attr(‘checked’, true);

    if (i==4)
    {
    i=1; // Return to image 1
    }
    else
    {
    i++; // Next Image
    }
    }

    $j(document).ready(function(){ //Start loop every 3.5 seconds (3500 miliseconde)
    setInterval(‘switchImage();’, 3500);
    });


Comments

  • Options
    #2
    myIdea
    Registered Users Posts: 97 ✭✭myIdea


    Replace your JQuery Code with this:
    [PHP]
    $(function () {
    var $AutoCheckImages = $('input[name="radio-set-1"]');
    (function _loop(idx) {
    $AutoCheckImages.prop('checked', false).eq(idx).prop('checked', true);
    setTimeout(function () {
    _loop((idx + 1) % $AutoCheckImages.length);
    }, 3500);
    }(0));
    });
    [/PHP]

    ...any questions?


  • Options
    #3
    LostBoy101
    Registered Users Posts: 2,369 ✭✭✭LostBoy101


    myIdea wrote: »
    Replace your JQuery Code with this:
    [PHP]
    $(function () {
    var $AutoCheckImages = $('input[name="radio-set-1"]');
    (function _loop(idx) {
    $AutoCheckImages.prop('checked', false).eq(idx).prop('checked', true);
    setTimeout(function () {
    _loop((idx + 1) % $AutoCheckImages.length);
    }, 3500);
    }(0));
    });
    [/PHP]...any questions?

    Wow.. thanks a lot for that! Just wondering would you know any decent youtube/website tutorials on JavaScript or JQuery?


Advertisement