Multiple images in slider

JavaScript
1

Hi, I have a jquery slider, In which i want to display 2 slides in each frame, How can i set that ? And also Mouse over caption to each slides, Below is my code. Thanks in advance


$("#slider4").responsiveSlides({
        auto: true,
        pager: false,
        nav: true,
        speed: 500,
        namespace: "callbacks",
        before: function () {
          $('.events').append("<li>before event fired.</li>");
        },
        after: function () {
          $('.events').append("<li>after event fired.</li>");
        }
      });

    });



<div class="callbacks_container">
      <ul class="rslides" id="slider4">
        <li>
          <img src="images/1.jpg" alt="">
          <p class="caption">This is a caption</p>
        </li>
        <li>
          <img src="images/2.jpg" alt="">
          <p class="caption">This is another caption</p>
        </li>
        <li>
          <img src="images/3.jpg" alt="">
          <p class="caption">The third caption</p>
        </li>
      </ul>
    </div>
2

You can easily place two images in each <li>:

<li>
  <img src="images/1.jpg" alt="">
  <p class="caption">This is a caption</p>
  <img src="images/2.jpg" alt="">
  <p class="caption">This is another caption</p>
</li>

Then you just have to style it all appropriately.

Feel free to post a demo on CodePen so that we can help further. :slight_smile:

Personally, I would wrap the img/caption pairs in divs for easier styling:

<li>
<div>
  <img src="images/1.jpg" alt="">
  <p class="caption">This is a caption</p>
</div>
<div>
  <img src="images/2.jpg" alt="">
  <p class="caption">This is another caption</p>
</div>
</li>

Or if you want to be extra fancy, use the <figure> element to wrap each pair in, along with <figcaption> instead of <p>. :slight_smile:

3

Hi ralph,
Thanks for the replay, It works for me :slight_smile: , How can i add animation to the hide and show of my caption while mouse over and mouse out ? Here is the demo http://codepen.io/salimali/pen/bdyHf

Thanks in advance

4

Something like this?

.caption {
 opacity: 0;
 -webkit-transition: opacity linear .3s;
 -moz-transition: opacity linear .3s;
 -o-transition: opacity linear .3s;
 -ms-transition: opacity linear .3s;
 transition: opacity linear .3s;
}

li:hover .caption {opacity: 1;}
5

Thanks ralph, It works :slight_smile: , I need a small help also, How can i stop the image rotation while mouse over on any image ? Thanks a lot

6

Many slider scripts have that as an in-built option. If the one you are using doesn’t, then I’d advise you use a different one, such as bxSlider or Slick.

7

Hi ralph, Thanks for the advice, As you mentioned i changed the slider to bxslider, Now the problem i am facing is when i press next or previous, after that it will not change the images automatically. Here is the link for CodePen http://codepen.io/salimali/pen/bdyHf

8

Yes, that’s how it works. One option would be to add the auto controls option, so that you can start the auto sliing again if desired:

$(document).ready(function(){
  $('.bxslider').bxSlider({
	slideWidth: 670,
	slideMargin: 10,
	randomStart:true,
	infiniteLoop:true,
	captions:true,
	tickerHover:true,
	responsive:true,
	pager:false,
	auto:true,
	autoHover:true,
	[COLOR="#FF0000"]autoControls: true[/COLOR]
  });
});