CODEWITHSUNDEEP
jquerycarousel
Justin John
Justin John

Reputation: 9616

Jquery carousel where prevoius and next button inside the each carousel slide

An jquery carousel where prev button and next button inside the carousel.

Normally carousel will have prev button on left side and next button right side

Is there any jquery carousel where prev and next buttons inside the carousel content ?

I need one slide at a time, every slides needs its previous and next button inside the content of that slide

Upvotes: 0

Views: 2275

Answers (3)

lucuma
lucuma

Reputation: 18339

With jquery cycle you can easily do this as well and there are two ways.

Plugin Download: http://jquery.malsup.com/cycle/options.html

Demo 1:

Add a prev and next button to each slide. The next and previous buttons will animate with the slides because they are inside the slide. The only reason you'd want to do this is if you wanted to animate those buttons with the slides. Normally this isn't the case (see example 2)

http://jsfiddle.net/lucuma/anwvL/1/

The html would be something like this:

<div id="slideshow">

<div>
    <a href="#" class="prev">prev</a><a href="#" class="next">next</a>
    <img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" />
</div>
<div>
    <a href="#" class="prev">prev</a><a href="#" class="next">next</a>
    <img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" /></div>
<div>
      <a href="#" class="prev">prev</a><a href="#" class="next">next</a>
        <img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" /></div>

</div>

JS:

$('#slideshow').cycle({
    fx: 'scrollHorz',
    prev: $('.prev'),
    next: $('.next')
});​

Demo 2

We position the next/prev buttons on top of the slides but not inside the slides. You will notice the prev/next buttons don't animate with the slides but are ontop of them. This is typically what you see on most slideshows (as text or arrows)

http://jsfiddle.net/lucuma/hXxtJ/1/

<div id="sliders">
    <div class="controller">
       <a href="#" class="prev">prev</a><a href="#" class="next">next</a>
    </div>
    <div id="slideshow">

        <div>
            <img src="http://weblogs.marylandweather.com/4526619322_1912218db8.jpg" />
        </div>
        <div>
            <img src="http://www.silverstar-academy.com/Blog/wp-content/uploads/2012/03/03-14-12N00184967.jpg" />
        </div>
         <div>
            <img src="http://cdn.the2012scenario.com/wp-content/uploads/2011/11/sunspot-500x500.jpg" />
        </div>
    </div>
</div>
​

JS:

$('#slideshow').cycle({
    fx: 'scrollHorz',
    prev: $('.prev'),
    next: $('.next')
});​

Upvotes: 0

ltiong_dbl
ltiong_dbl

Reputation: 3216

Nivo slider. Check out the demo.. http://nivo.dev7studios.com/demos/

You want to set "directionNav : true" per http://nivo.dev7studios.com/support/jquery-plugin-usage/

Upvotes: 0

RemarkLima
RemarkLima

Reputation: 12037

Can you not just use CSS to position the prev and next buttons to be inside the slide?

Upvotes: 0

Related Questions