Add class to external navigation when slide auto-play happens : anythingSlider - javascript

My anythingSlider looks like this
<link rel="stylesheet" href="http://css-tricks.github.com/AnythingSlider/css/theme-metallic.css">
<div id="externalNav">
Goto One |
Two |
Three |
Four
</div>
<br><br>
<ul id="slider">
<li><img src="http://placekitten.com/300/200" alt="" /></li>
<li><img src="http://placehold.it/300x200" alt="" /></li>
<li><img src="http://placebear.com/300/200" alt="" /></li>
<li><img src="http://lorempixel.com/300/200" alt="" /></li>
<li><img src="http://placedog.com/300/200" alt="" /></li>
</ul>
$('#slider').anythingSlider({
// If true, builds a list of anchor links to link to each panel
buildNavigation: false,
autoPlay: true
});
When autoplay happens and first slide is active I want to add a class to One (and so on for next slides) so that I can show it as selected. Can any one point out what is the correct approach to make this?
JsFiddle


The AnythingSlider Wiki has just the example you wanted:
Custom, external navigation controls (with updating "cur" class)
var nav = $('#externalNav a'),
updateNav = function(page){
nav
.removeClass('cur')
.eq(page).addClass('cur');
}
$('#slider').anythingSlider({
// If true, builds a list of anchor links to link to each panel
buildNavigation: false,
onInitialized: function(e, slider) {
updateNav(slider.currentPage-1);
},
// Callback before slide animates
onSlideBegin: function(e, slider) {
updateNav(slider.targetPage-1);
}
});
// set up external links
nav.click(function(){
var slide = $(this).attr('href').substring(1);
$('#slider').anythingSlider(slide);
return false;
});
Demo: http://jsfiddle.net/Mottie/ycUB6/76/

Related

How do I make pagerCustom carousel in bxSlider?

I created a thumbnail slider with bxSlider pagerCustom. Thumbnails do not fit in the slider. I need to make the thumbnails a carousel.
I have 15 pictures and 15 thumbnails for them and the picture slide works like a carousel and I need the thumbnails to work the same way
How should I do it?
`js
$(document).ready(function() {
jQuery('.bxslider').bxSlider({
nextText: '',
prevText: '',
pagerCustom: '#bx-pager',
});
});
`
<div class="product3_slider">
<div class="slider3">
<ul class="bxslider">
<li><img src="https://static.mikrotik.group/image/trm240.jpg" /></li>
<li><img src="https://static.mikrotik.group/image/trm240back.jpg" /></li>
</ul>
</div>
<div id="bx-pager">
<a data-slide-index="0" href=""><img src="https://static.mikrotik.group/image/trm240small.jpg" /></a>
<a data-slide-index="1" href=""><img src="https://static.mikrotik.group/image/trm240backsmall.jpg"/></a>
</div>
</div>
I tried to find examples where there are a lot of pictures with thumbnails, but I did not find such examples.

Find a div in Flexslider after callback

I'm using Flexslider. On completing each slide, I want to find the content of a div .extra. I'm trying to use the after callback function of Flexslider to find the content of the div, but it does not find. It does not even find any parent or any other element class.
How can I find the content of .extra div on completing each slide?
HTML:
<div class="box">
<div class="extra">abc</div>
<div class="flexslider">
<ul class="slides">
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
</ul>
</div>
</div>
JS:
$('.flexslider').flexslider({
animation: "slide",
after: function(slider) {
var abc = $(this).parents().find('.extra').html();
alert(abc);
}
});
Demo:
http://jsfiddle.net/he8gfh29/

The below code will work for you :) as the slider's selector is being passed through function(slider) you need to use slider object at the place of $(this).
$('.flexslider').flexslider({
animation: "slide",
after: function(slider) {
var abc = slider.parents().find('.extra').html();
alert(abc);
}
});

JQuery bxslider wrong calculation after scale container for horizontal mode

Hi I have a bxslider which is in a transformed/scaled container. How can I correct the calculation of the slide position. It seems like a normal reload doesn't affect the calculation when its container is scaled.
//EDIT: I found out that this problem effects not the fade mode of the bxslider, so this could be a workaround...
How can the horizontal mode of the bxslider be fix, when the whole container got scaled down?
See my example: http://jsfiddle.net/wittich/umgwrh3b/
HTML
<div class="container">
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/hill_road.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
</ul>
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/hill_road.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li>
</ul>
</div>
<p>Click to reload slider</p>
JS
jQuery(document).ready(function(){
var sliders = [];
jQuery('.bxslider').each(function(i,item){
var slider = $(this);
slider.bxSlider({
auto: true,
mode: 'horizontal'
});
sliders[i] = slider;
});
$('.container').css('transform', 'scale(0.8)');
$(sliders).each(function(){
this.reloadSlider();
});
$('#reload-slider').click(function(e){
e.preventDefault();
$(sliders).each(function(){
this.reloadSlider();
});
});
});

Jquery Auto Slider with buttons

Can anyone recommend any good product auto slider with buttons. I am new to jquery so any good easy jquery slider would be fine. I am looking to build this kind of slider
.And when click on the image then it should open the clicked image with description like this . Any help of how can i make this slider would be appreciated thanks in the advance.

popup: colorbox
slider: elastislide-responsive-carousel
http://jsfiddle.net/ckraoftt/1/
HTML:
<div class="column">
<ul id="carousel" class="elastislide-list">
<li><img src="img44" alt="image04" /></li>
<li><img src="img33" alt="image03" /></li>
<li><img src="img22" alt="image02" /></li>
<li><img src="img11" alt="image01" /></li>
</ul>
</div>
JQ:
$( '#carousel' ).elastislide( {
orientation : 'vertical'
} );
$('#carousel a').colorbox({photo :true});
EDIT2:
http://jsfiddle.net/ckraoftt/7/
for all a tag add 2 attr:
data-txt="image 4 4000$" //text after image
data-button-url="http://test.com/shop/4" //url for button Shop
JQ
$( '#carousel' ).elastislide( {
orientation : 'vertical'
} );
$('#carousel a').colorbox({
html:function(){
var src=$(this).attr('href');
var txt=$(this).attr('data-txt');
var url=$(this).attr('data-button-url');
var img='<img src="'+src+'">';
var text= '<div class="pp_txt">'+txt+'</div>';
var btn='<a class="pp_btn" href="'+url+'">SHOP</a>';
var html='<div class="popup">'+img+text+btn+'</div>';
return html;
}

Window.load works only after browser tab change

I am using flex slider with multiple instance, the first slider works fine, but other slides are only showing correctly after changed browser tab and get back, but second slide's thumbnails show after only changed browser tab again.
How can I make them work same time, I mean they should be working when page loads first time.
Here is my code
<script>
$(window).load(function() {
// The slider being synced must be initialized first
$('#carousel').flexslider({
animation : "slide",
controlNav : false,
animationLoop : false,
slideshow : false,
itemWidth : 220,
itemMargin : 5,
asNavFor : '#slider'
});
$('#slider').flexslider({
animation : "slide",
controlNav : false,
animationLoop : false,
slideshow : false,
sync : "#carousel"
});
$('#slider2').flexslider({
animation : "slide",
controlNav : false,
animationLoop : false,
slideshow : false
});
$('#carousel2').flexslider({
animation : "slide",
controlNav : false,
animationLoop : false,
slideshow : false,
itemWidth : 220,
itemMargin : 5,
asNavFor : '#slider2'
});
</script>
<html>
<div id="slider" class="flexslider">
<ul class="slides">
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_caramel.jpg"
style="height: 580px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_cheesecake_brownie.jpg"
style="height: 580px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_donut.jpg"
style="height: 580px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_lemon.jpg"
style="height: 580px;" /></li>
<!-- items mirrored twice, total of 12 -->
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_caramel.jpg"
style="height: 580px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_cheesecake_brownie.jpg"
style="height: 580px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_donut.jpg"
style="height: 580px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_lemon.jpg"
style="height: 580px;" /></li>
</ul>
</div>
<div id="carousel" class="flexslider flex_carousel">
<div class="carousel_icon"></div>
<ul class="slides pull-left">
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_caramel.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_cheesecake_brownie.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_donut.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_lemon.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_caramel.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_cheesecake_brownie.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_donut.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_lemon.jpg"
style="height: 80px;" /></li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
</html>
********* EDITED **********
You can see it online here http://goo.gl/cHMaBq
First tab (one star) works perfect.
There is no image on second tab, please go to another browser tab and return , you will see the slider works, but no thumbnail. Please go to another browser tab again and return, thumbnails will be shown.
Thanks

I've fixed it, pictures were rendered, but don't show until I resize browser.
So , this problem has been fixed this issue.
$('a[data-toggle="tab"]').click(function() {
setTimeout(function() {
$(window).trigger('resize');
}, 0);
setTimeout(function() {
$(window).trigger('resize');
}, 2)
});

Categories

Resources