Results 1 to 2 of 2

Thread: [JQuery] Slideshow

  1. #1

    Thread Starter
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    11,698

    [JQuery] Slideshow

    A simple slideshow image gallery. It uses Unicode text for the arrows(VBForums converts the hex character to the character), FlexBox for the ordering, and JQuery for the fade effects.

    HTML
    Code:
    <div id="slideshow">
      <img alt="❮" class="slideshowButtons" id="btnPrevious" />
      <img id="slide" src="" />
      <img alt="❯" class="slideshowButtons" id="btnNext" />
    </div>
    CSS
    Code:
    #slideshow {
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
      align-content: stretch;
      -webkit-align-items: stretch;
      -ms-flex-align: stretch;
      align-items: stretch;
      
      height: 250px;
    }
    
    .slideshowButtons {
      -webkit-order: 0;
      -ms-flex-order: 0;
      order: 0;
      -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
      flex: 0 1 auto;
      -webkit-align-self: center;
      -ms-flex-item-align: center;
      align-self: center;
      
      cursor: pointer;
      padding: 0 1em;
    }
    
    #slide {
      -webkit-order: 0;
      -ms-flex-order: 0;
      order: 0;
      -webkit-flex: 0 1 250px;
      -ms-flex: 0 1 250px;
      flex: 0 1 250px;
      -webkit-align-self: auto;
      -ms-flex-item-align: auto;
      align-self: auto;
      
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    JQuery - Not Timed
    Code:
    var index = 0;
    var images = ["http://lorempixel.com/250/200/people/", "http://lorempixel.com/250/200/animals/"];
    
    $(document).ready(function(){
    	$("#slide").attr("src", images[index]);
    	$("#btnPrevious").click(function(){
    		index = (index - 1 < 0 ? images.length - 1 : index - 1);
    		$("#slide").fadeTo(250, 0.0, function() {
    			  $("#slide").attr("src", images[index]);
    		  }).fadeTo(250,1);
    	});
    	$("#btnNext").click(function(){
    		index = (index + 1 > images.length - 1 ? 0 : index + 1);
    		$("#slide").fadeTo(250, 0.0, function() {
    			  $("#slide").attr("src", images[index]);
    		  }).fadeTo(250,1);
    	});
    });
    JQuery - Timed
    Code:
    var index = 0;
    var images = ["http://lorempixel.com/400/200/abstract/", "http://lorempixel.com/400/200/animals/"];
    
    $(document).ready(function(){
    	$("#slide").attr("src", images[index]);
    	$("#btnPrevious").click(function(){
    		index = (index - 1 < 0 ? images.length - 1 : index - 1);
    		$("#slide").fadeTo(250, 0.0, function() {
    			  $("#slide").attr("src", images[index]);
    		  }).fadeTo(250,1);
    	});
    	$("#btnNext").click(function(){
    		index = (index + 1 > images.length - 1 ? 0 : index + 1);
    		$("#slide").fadeTo(250, 0.0, function() {
    			  $("#slide").attr("src", images[index]);
    		  }).fadeTo(2520,1);
    	});
    	offsetLoop(0, 5, 5);
    });
    
    function offsetLoop(i, counter, idsRemaining) {
    	while (idsRemaining >= 0) {
    		i++;
    		idsRemaining--;
    		if (idsRemaining >= 0) {
    			setTimeout(function () {
    				offsetLoop(i, counter, idsRemaining);
    			}, 1000);
    		   break;
    		}
    	}		  
    	if (idsRemaining < 0 ) {
    		$("#btnNext").click();
    		offsetLoop(0, 5, 5);
    	}
    };
    Not Timed Fiddle: https://jsfiddle.net/mja903yh/
    Timed Fiddle: https://jsfiddle.net/strdz57p/
    Last edited by dday9; Jan 10th, 2016 at 12:30 AM.
    "Code is like humor. When you have to explain it, it is bad." - Cory House
    VbLessons | Code Tags | Sword of Fury - Jameram

  2. #2
    Member
    Join Date
    Jul 2019
    Location
    Ahmedabad
    Posts
    57

    Re: [JQuery] Slideshow

    Please try this code, To slideshow using Jquery.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    <ul id="ss">
        <li class="active"><img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado-colors.jpg"></li>
      <li><img src="http://leemark.github.io/better-simple-slideshow/demo/img/monte-vista.jpg"></li>
      <li><img src="http://leemark.github.io/better-simple-slideshow/demo/img/monte-vista.jpg"></li>
      <li><img src="http://leemark.github.io/better-simple-slideshow/demo/img/monte-vista.jpg"></li>
        <li class="last"><img src="http://leemark.github.io/better-simple-slideshow/demo/img/colorado.jpg"></li>
    </ul>
    </body>
    </html>
    Code:
    *{
      margin: 0;
      padding: 0;
    }
    #ss{
      list-style: none;
    }
    #ss li{
      float: left;
    }
    #ss img{
      width: 200px;
      height: 100px;
    }
    Code:
        $(function() {
            var theImage = $('ul#ss li img');
            var theWidth = theImage.width();
    
            $('ul#ss').wrap('<div id="mother" />');                 
            $('#mother').css({
                width: function() {
                    return theWidth;
                }, 
                height: function() {
                    return theImage.height();
                }, 
                position: 'relative',
                overflow: 'hidden'      
            });
                //get total of image sizes and set as width for ul 
            var totalWidth = theImage.length * theWidth;
            $('ul').css({
                width: function(){
                    return totalWidth;  
                }               
            }); 
    
            var ss_timer = setInterval(function(){ ss_next(); }, 3000);
    
            function ss_next()
            {
                var a = $(".active");
                a.removeClass('active');                                                                                                                
    
                if(a.hasClass('last'))
                {
                    //last element -- loop
                    a.parent('ul').animate({"margin-left": (0)}, 1000);
                    a.siblings(":first").addClass('active');                            
                }
                else
                {
                    a.parent('ul').animate({"margin-left": (-(a.index() + 1) * theWidth)}, 1000);   
                    a.next().addClass('active');
                }
            }
    
           
            $('ul#ss li img').on('click', function(){               
                clearInterval(ss_timer);
                ss_next();
            });
    
        });
    I hope this code will be useful to you.
    Thank you.
    < advertising removed by moderator >

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width