I am using flexslider http://www.woothemes.com/flexslider/ , now I want to get the total number of the slides and the number of the sildes.
number of the slide/total number of the slides
for example if I have 5 slides and I am now in 2nd slide, so this will be the output below the slides.
2/5
if I click the "next nav" it will become
3/5
if "prev nav";
2/5
It is possible in flexslider? if yes, how to do it?
You can find the answer here:http://www.woothemes.com/flexslider.
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".flex-container",
start: function(slider) {
$('.total-slides').text(slider.count);
},
after: function(slider) {
$('.current-slide').text(slider.currentSlide);
}
});
});
</script>
If you want even the first slide to be counted you can add in the start function:
$('.current-slide').text(slider.currentSlide);
If you want the current-slide to begin with number 1 (not 0) you can do:
$('.current-slide').text(slider.currentSlide+1);
According to this website, you can do it with the callback API. http://www.woothemes.com/flexslider/. Write a Start and After callback method when you instantiate flexslider, and pass in the slider. Then use slider.count and slider.currentSlide to get what you need. In my code below, $slider_wrap, $current_slide and $total_slides are just variables assigned to jQuery objects where I wanted to display the slider count. I did slider.currentSlide+1 because the first slide is actually 0 in the array.
$slider_wrap.flexslider({
start: function(slider){
$current_slide.html(slider.currentSlide+1);
$total_slides.html(slider.count);
},
after: function(slider){
$current_slide.html(slider.currentSlide+1);
$total_slides.html(slider.count);
}
});
Base on the demo here
I notice the demo and others will generate the code like below :
<ol class="flex-control-nav flex-control-paging">
<li><a class="">1</a>
</li>
<li><a class="flex-active">2</a>
</li>
<li><a>3</a>
</li>
<li><a>4</a>
</li>
</ol>
So according this, you can get what you want using the code:
var index = $('li:has(.flex-active)').index('.flex-control-nav li')+1;
var total = $('.flex-control-nav li').length;
Based on the markup in that page you link you can get the number of slides like this:
$(".slides").find("li").length
And you can find the number of the active slide with:
$(".slides").find("li.flex-active-slide").index() + 1;
And if you want to change something when the slider changes, you can add something to the after callback.
$(".mybox").flexslider({
after: function() {
// update the count
}
});
I am currently doing exactly the same thing to generate the slide index (...though I'm using PHP to generate an integer for the number of images)
Try creating an element for the slide index...
<p class="slideIndex"></p>
...and use the after:function...
$('.flexslider').flexslider({
after: function(slider) {
slider.find('.slideIndex').html(slider.currentSlide + 1);
}
});
Get the slider and then use count:
$(yourslider).data('flexslider').count
Related
I would like use control buttons in JsCarousel slider.
In my code i make function for initialization carousel:
<script type="text/javascript">
function InitializationJsCarousel(obj){
var carousel = $(obj).jcarousel({
// Core configuration goes here
});
$(obj)
.on('jcarousel:create jcarousel:reload', function() {
var element = $(this),
width = element.innerWidth();
// This shows 1 item at a time.
// Divide `width` to the number of items you want to display,
// eg. `width = width / 3` to display 3 items at a time.
width = width / 3;
element.jcarousel('items').css('width', width + 'px');
})
.jcarousel({
// Core configuration goes here
});
$('.jcarousel-prev').jcarouselControl({
target: '-=1',
carousel: carousel
});
$('.jcarousel-next').jcarouselControl({
target: '+=1',
carousel: carousel
});
}
$(function(){
...
InitializationJsCarousel('.jcarousel');
...
});
</script>
But as i can see jcarouselControl not working. I see console,but errors not found. It problem becouse control buttons not working...
Tell me please why control buttons(jcarouselControl) not working and how make that theys work?
Code working for me.
First check that include jquery.jcarousel-control.js or jquery.jcarousel-control.min.js
Second check class name for control element (in your code it jcarousel-prev). Check name in js and in html.
I'm trying to create a custom slider using jQuery only I'm unsure on the best practice for how ot make this work.
My slider has 3 slides and a controls section each relating to a slide (1, 2, 3).
When a control is clicked I've got my slide fading out only I'm unsure on how to say if X control was clicked, add the active class to the relevant slide?
Ive made a fiddle to explain which i hope helps, what i need however is an explanation of the best practice in doing this?
Sorry if the questions hard to understand!
What I'm using to fade out my current slide, but then once its gone I cant rely on the active class to say add a class to the next element?
$('.ctrl-one').click(function(){
$('.active .slide-img').animate({
'marginRight' : "-=350px"
}, 500, 'easeOutQuint', function(){
$('.active .description').fadeOut().promise().done(function(){
$(this).parent().removeClass('active');
});
});
});
http://jsfiddle.net/Esm97/
I guess this is what you need,try this code , but am sure you can find a lot different methods.
$('.controls a').click(function() {
var current = $(this).attr('class').replace('ctrl-', '');
if (!$('.sector-banner .' + current).hasClass('active')) {
$('.active').animate({
'marginRight': "-=350px"
}, 500, 'linear', function() {
$(this).fadeOut().promise().done(function() {
$(this).css('margin-right',0);
$(this).removeClass('active');
$('.sector-banner .' + current).addClass('active');
$('.sector-banner .' + current).fadeIn();
});
});
}
});
I was using jCarousel plugin to display a series of items. I was following this example from the web site to get external controls and a paging control.
There's two problems with this approach:
i need to add the items for the numbers manually (instead of just calculating the number of items in the carousel with JS), although I can live with this, and
There seems to be no way to highlight (via a class change) the item for the current slide
What I am doing is using bullets as paging dots, as you can see in this fiddle
<div class="carousel-nav cf">
<table>
<tr>
<td>◀</td>
<td>
<div class="jcarousel-control">
•
•
•
</div>
</td>
<td>►</td>
</tr>
</table>
</div>
and would like to set the class to "active" or similar for the current item.
Any ideas? Or is there a better plugin for this? I tried Cycle but I need two have 2 or more items showing at once. Thanks.
html:
<ul class="jcarousel-control"></ul>
script:
$('.jcarousel-control')
.on('jcarouselpagination:active', 'li', function() {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'li', function() {
$(this).removeClass('active');
})
.jcarouselPagination({
'perPage':1,
'item': function(page, carouselItems) {
return '<li class="' + (page == 1 ? "active" : "") + '"></li>';
}
});
$('.mycarousel-prev').jcarouselControl({target:'-=1'});
$('.mycarousel-next').jcarouselControl({target:'+=1'});
actually you can use call back function for higlighting respective to current active carousel element
function highlighttab1(carousel, state, liindex) {
document.getElementById(liindex).className = "selected";}
function removehighlighttab1(carousel, state, liindex) {
document.getElementById(liindex).className = "unselected";}
few days ago i worked with jcarousel where i had menu label panel (as you have dots) and all static hyperlinks which when clicked will scroll to the intendent carousel element
I'm using the jQuery cycle plugin to cycle through multiple divs in a container. All is working well the only functionality that I would like to add that I can't seem to find an option for with in the plugin is the ability to hide both buttons if there is only one slide present with in the container. My current code is this:
//Goal summary page cycler
$('#showGoal').after('<div id="nav">')
.cycle({
fx: 'scrollHorz',
speed:300,
prev: '#goalPrev',
next: '#goalNext',
timeout: 0,
pager: '#nav',
after: onAfter,
pagerAnchorBuilder: function(idx, slide) {
return'';
}
});
// call back to remove buttons on first and last slide / adjust height of container
function onAfter(curr, next, opts, fwd) {
var index = opts.currSlide;
$('#goalPrev')[index == 0 ? 'hide' : 'show']();
$('#goalNext')[index == opts.slideCount - 1 ? 'hide' : 'show']();
//get the height of the current slide
var $ht = $(this).height();
//animates the container's height to that of the current slide
$(this).parent().animate({ height: $ht });
}
I'm guessing I can either check the index and remove them both that way or possibly do something along the lines of an if statement for example (pseudo code) :
var index = this.index();
var numOfSlides = 0;
if ( numOfSlide < index ) {
//hide the buttons
}
else
{
//show the buttons
}
Thanks for any possible help with this!
The approach recommended by the plugin author is to hide the buttons using Javascript:
http://forum.jquery.com/topic/cycle-plugin-hide-prev-next
Problem solved and I feel like an idiot for missing it, You have to set the display of the arrows to none initially.
Shouldn't it already work? If you only have one slide then your onAfter function should take care of it. With one slide your index is always 0. Your opts.slideCount - 1 would also be zero because you would have one slide minus one.
Edit:
But as stated below, onAfter may need to be called after the page loads because when dealing with one slide the function may not be getting called.
I have a container with a lot of small images.
<div id="container">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
...
<img src="100.jpg" />
</div>
I set opacity to 0. (not hidding)
Then I want to show(fadeIn) random image after half second. for example 5th, 1st, 55th ...
Any suggestions, thanx a lot
try this
<script type="text/javascript">
//generate random number
var randomnumber=Math.floor(Math.random()*$("#container").children().length);
$(function() {
//hide all the images (if not already done)
$("#container > img").hide();
//set timeout for image to appear (set at 500ms)
setTimeout(function(){
//fade in the random index of the image collection
$("#container > img:eq(" + randomnumber + ")").fadeIn();
}, 500);
});
</script>
put an id to each image, with a number pattern, and then fade a image with a random generated id, using math.random from javascript
function getImage(minim,maxim) {
return "img" + Math.round(Math.random()*(maxim-minim)+minim);
}
It is not clear (to me) if you want to start fading after half a second, or fade in in half a second. However, going with fade in after half a second. If you want to do it otherwise, just ignore the stuff with setTimeout()
The general overview of what you want to do is:
Create a function when the page has loaded that is called after half a second (setTimeout)
That function should generate a random number, with the min as 0, and the max as the number of children of the #container element minus 1
Fade the child of the #container with the index supplied by the random number.
Pusdo code (It is a long time since I have done anything with jQuery. Or Javascript for that matter)
function onDocumentReady(){
setTimeout(500, "fadeInRandom()");
}
function fadeInRandom(){
var numElements = $("#container").children().length;
var randomElem = Math.random() * (numElements-1);
$("#container").children()[randomElem].fadeIn();
}
If you want to fade-in all images instead, theres no need to use all the random stuff, just cicle and delay a random number
between 500ms and 1 second. You have to put hide function anyway. Or with opacity use animate css.
$('#container img').each(function(index) {
$(this).delay( Math.random()*500+500 ).fadeIn();
});
you won't find nothing simpler than that, and with the same effect
I would use the random number generated to create the image's 'src' attribute and build the jQuery selector accordingly:
setInterval ( showRandomImage, 500 );
function showRandomImage()
{
var randNo = Math.floor(Math.random() * 101);
$("#container > img[src=" + randNo + "'.jpg']")
.animate({opacity: 0}, 500).fadeIn('slow');
}