admin管理员组

文章数量:1289910

I am currently working on a site,that uses Sorgilla jquery jcarousel, there are two sliders working together.

var carousel_2;
jQuery(document).ready(function() {
jQuery('#right-carousel').jcarousel({
    start: 1, // Configuration goes here
    wrap: "circular",
    scroll: 1,
    auto:3,
    vertical:true,

    itemFirstInCallback: {
    onBeforeAnimation: function(carousel, item, index, action) {
        if (carousel_2) {
            carousel_2[action]();
        }



            }
        }
    });
});

jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
    start: 3, // Configuration goes here
    wrap: "circular",
    scroll: 1,
    auto:3,
    vertical:false,
    buttonNextHTML: null,
    buttonPrevHTML: null,
    initCallback: function(c) {
    carousel_2 = c;
}
});

});

This works as it should but I am wondering is it possible to add external controls with the set up I am using. Unfortunately Im quite new to jquery so still learning.

What Im looking to do is add buttons underneath the carousel that behave like pagination, here is an example... .php or

here is the site im working on /

Ideally if I could get those pagination buttons working similar to above, itd be great.

I have this css set up underneath the carousel.

.jcarousel-pagination {
width:100px;
height:40px;
position:absolute;
right:100px;
bottom:0px;
background:#000;

}

.jcarousel-pagination a {
font-size: 75%;
text-decoration: none;
padding: 0 5px;
margin: 0 0 5px 0;
border: 1px solid #fff;
color: #eee;
background-color: #4088b8;
font-weight: bold; 
}

Here is some documentation... /

I was considering adding this code to the function inside initCallback: but unsure how to get it working or how to tell it what button represents what slide...

                jQuery('.jcarousel-pagination a').bind('click', function() {
            carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
            return false;
            });

Any help would be great, I know its a bit of a general question, but im not sure where to start Thank you.

I am currently working on a site,that uses Sorgilla jquery jcarousel, there are two sliders working together.

var carousel_2;
jQuery(document).ready(function() {
jQuery('#right-carousel').jcarousel({
    start: 1, // Configuration goes here
    wrap: "circular",
    scroll: 1,
    auto:3,
    vertical:true,

    itemFirstInCallback: {
    onBeforeAnimation: function(carousel, item, index, action) {
        if (carousel_2) {
            carousel_2[action]();
        }



            }
        }
    });
});

jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
    start: 3, // Configuration goes here
    wrap: "circular",
    scroll: 1,
    auto:3,
    vertical:false,
    buttonNextHTML: null,
    buttonPrevHTML: null,
    initCallback: function(c) {
    carousel_2 = c;
}
});

});

This works as it should but I am wondering is it possible to add external controls with the set up I am using. Unfortunately Im quite new to jquery so still learning.

What Im looking to do is add buttons underneath the carousel that behave like pagination, here is an example... http://truelogic/multicarousel.php or http://www.skyports.

here is the site im working on http://hartyinternational.hailstormmerce./

Ideally if I could get those pagination buttons working similar to above, itd be great.

I have this css set up underneath the carousel.

.jcarousel-pagination {
width:100px;
height:40px;
position:absolute;
right:100px;
bottom:0px;
background:#000;

}

.jcarousel-pagination a {
font-size: 75%;
text-decoration: none;
padding: 0 5px;
margin: 0 0 5px 0;
border: 1px solid #fff;
color: #eee;
background-color: #4088b8;
font-weight: bold; 
}

Here is some documentation... http://sorgalla./projects/jcarousel/

I was considering adding this code to the function inside initCallback: but unsure how to get it working or how to tell it what button represents what slide...

                jQuery('.jcarousel-pagination a').bind('click', function() {
            carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
            return false;
            });

Any help would be great, I know its a bit of a general question, but im not sure where to start Thank you.

  • javascript
  • jquery
  • carousel
Share Improve this question edited Jan 2, 2013 at 9:23 Adrian asked Dec 20, 2012 at 14:42 AdrianAdrian 2,0125 gold badges46 silver badges109 bronze badges 2
  • Sorry, i don't understand what you want to do with the external button..please, can you explain it with more precision? I think that there are something that worked well in this framework's callback. – phemt.latd Commented Dec 20, 2012 at 15:21
  • 2 apologies, I realised I pletely left out exactly what Im trying to do, im going to edit the post now. – Adrian Commented Dec 20, 2012 at 15:22
Add a ment  | 

2 Answers 2

Reset to default 3 +50

Copy/Paste the below code on a temp web page, make sure that the page the Javascript points to your folder where they are located and this should work.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="../style.css" rel="stylesheet" type="text/css" />
<!--
  jQuery library
-->
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script>
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" />
<title>Untitled Document</title>
<style type="text/css">

/**
 * Additional styles for the controls.
 */
.jcarousel-control {
    margin-bottom: 10px;
    text-align: center;
}

.jcarousel-control a {
    font-size: 75%;
    text-decoration: none;
    padding: 0 5px;
    margin: 0 0 5px 0;
    border: 1px solid #fff;
    color: #eee;
    background-color: #4088b8;
    font-weight: bold;
}

.jcarousel-control a:focus,
.jcarousel-control a:active {
    outline: none;
}

.jcarousel-scroll {
    margin-top: 10px;
    text-align: center;
}

.jcarousel-scroll form {
    margin: 0;
    padding: 0;
}

.jcarousel-scroll select {
    font-size: 75%;
}

#mycarousel-next,
#mycarousel-prev {
    cursor: pointer;
    margin-bottom: -10px;
    text-decoration: underline;
    font-size: 11px;
}

</style>



<script type="text/javascript">

// for #mycarousel
function mycarousel_initCallback(carousel) {
    jQuery('.jcarousel-control a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        return false;
    });
};
// end for #mycarousel

// for #right-carousel
function right_carousel_initCallback(carousel) {
    jQuery('.jcarousel-control-right a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        return false;
    });
};
// end for #right-carousel


jQuery(document).ready(function() {

var carousel_2;

jQuery('#right_carousel').jcarousel({
    start: 1, // Configuration goes here
    wrap: "circular",
    scroll: 1,
    auto:3,
    vertical:true,
    initCallback: right_carousel_initCallback,
    itemFirstInCallback: {
    onBeforeAnimation: function(carousel, item, index, action) {
        if (carousel_2) {
            carousel_2[action]();
                                                                                                      }
                                }
                                      }
         });


jQuery('#mycarousel').jcarousel({
    start: 3, // Configuration goes here
    wrap: "circular",
    scroll: 1,
    auto:3,
    vertical:false,
    initCallback: mycarousel_initCallback,
    buttonNextHTML: null,
    buttonPrevHTML: null,

});

});
</script>


</head>

<body>

<div id="mycarousel" class="jcarousel-skin-tango">
    <div class="jcarousel-control">
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
      <a href="#">6</a>
      <a href="#">7</a>
      <a href="#">8</a>
      <a href="#">9</a>
      <a href="#">10</a>
    </div>

    <ul>
      <li><img width="75" height="75" src="http://static.flickr./66/199481236_dc98b5abb3_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr./75/199481072_b4a0d09597_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr./57/199481087_33ae73a8de_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr./77/199481108_4359e6b971_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr./58/199481143_3c148d9dd3_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr./72/199481203_ad4cdcf109_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr./58/199481218_264ce20da0_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr./69/199481255_fdfe885f87_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr./60/199480111_87d4cb3e38_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr./70/229228324_08223b70fa_s.jpg" alt="" /></li>
    </ul>

    <div class="jcarousel-scroll">
      <form action="">
        <a href="#" id="mycarousel-prev">&laquo; Prev</a>
        <select>
          <option value="1">Scroll 1 item per click</option>
          <option value="2">Scroll 2 items per click</option>
          <option value="3">Scroll 3 items per click</option>
          <option value="4">Scroll 4 items per click</option>
          <option value="5">Scroll 5 items per click</option>
        </select>
        <a href="#" id="mycarousel-next">Next &raquo;</a>
      </form>
    </div>

  </div>

</div>


<!-- second one -->


<div id="right_carousel" class="jcarousel-skin-tango">
    <div class="jcarousel-control-right">
      <a href="#">1</a>
      <a href="#">2</a>
      <a href="#">3</a>
      <a href="#">4</a>
      <a href="#">5</a>
      <a href="#">6</a>
      <a href="#">7</a>
      <a href="#">8</a>
      <a href="#">9</a>
      <a href="#">10</a>
    </div>

    <ul>
      <li><img width="75" height="75" src="http://static.flickr./66/199481236_dc98b5abb3_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr./75/199481072_b4a0d09597_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr./57/199481087_33ae73a8de_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr./77/199481108_4359e6b971_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr./58/199481143_3c148d9dd3_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr./72/199481203_ad4cdcf109_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr./58/199481218_264ce20da0_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr./69/199481255_fdfe885f87_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr./60/199480111_87d4cb3e38_s.jpg" alt="" /></li>
      <li><img width="75" height="75" src="http://static.flickr./70/229228324_08223b70fa_s.jpg" alt="" /></li>
    </ul>

    <div class="jcarousel-scroll">
      <form action="">
        <a href="#" id="mycarousel-prev">&laquo; Prev</a>
        <select>
          <option value="1">Scroll 1 item per click</option>
          <option value="2">Scroll 2 items per click</option>
          <option value="3">Scroll 3 items per click</option>
          <option value="4">Scroll 4 items per click</option>
          <option value="5">Scroll 5 items per click</option>
        </select>
        <a href="#" id="mycarousel-next">Next &raquo;</a>
      </form>
    </div>

  </div>

</div>



</body>
</html>

Actually they use this function to rotate 

 jQuery(document).ready(function() {
    $('.lnkDot').click(function(){alert(1)
        var img = jQuery(this).attr('id');
        var id = img.substring(img.length-1);

        var currId = currentDot;
        var i = 0;
        var start= 0;
        var stop = 0;

        if (parseInt(currId) < parseInt(id)) {
            start = currId;
            stop = id;
        }
        else {
            start= id;
            stop = currId;
        }
        for (i = start; i<= stop; i++) {
            actionFromDot = true;

            var carousel = jQuery('#mycarousel').data('jcarousel');
            carousel.next();

        }
        currentDot = id;

        return false;
    });
});

What they do is, when they click on the pagination they takes the id of the current element and get the number (var id = img.substring(img.length-1);).

Once they get the number they will have start and end position to rotate (Start position they calculate from global variable currentDot).

Later the make clicked id is currentDot

Change your pagination links like this.

<a href="#" id='page1' class='lnkDot'>1</a>
<a href="#" id='page2' class='lnkDot'>2</a>
<a href="#" id='page3' class='lnkDot'>3</a>

本文标签： javascriptjquery jcarousel how to add control buttonsStack Overflow

版权声明：本文标题：javascript - jquery jcarousel how to add control buttons - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741461728a2380076.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。