I have BXSlider (https://bxslider.com/) installed. Now I want the following jQuery script to run on entering a "slide".
$(document).ready(function () {
$(".next-prev-nav").fadeTo( "slow", 1 );
$(".disable-slide-nav").hide();
});
(The script enables the navigation of the slider again.)
I tried to search the website of BXslider, but I couldn't find anything about it.
Hope someone can help me out.
You are looking for either onSlideBefore (executes immediately before each slide transition) or onSlideAfter (executes immediately after each slide transition - when transition completes) depending on your needs both can be found here - look at the section Callbacks.
Here is an example:
$(function(){
var slider = $('.bxslider').bxSlider({
mode: 'horizontal',
captions: true,
slideWidth: 600,
auto: true,
pause: 1000,
onSlideBefore: function () {
console.log('onSlideBefore');
// Your code either goes here or...
},
onSlideAfter: function () {
console.log('onSlideAfter');
// Goes here...
// For example lets turn the slider off after the second slide appears
slider.stopAuto();
}
});
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<div class="bxslider">
<div><img src="https://bxslider.com/assets/images/coffee1.jpg" title="Funky roots"></div>
<div><img src="https://bxslider.com/assets/images/coffee2.jpg" title="The long and winding road"></div>
<div><img src="https://bxslider.com/assets/images/coffee3.jpg" title="Happy trees"></div>
</div>
Related
I was unable to create a codepen to demonstrate this issue (too many dependencies to sort out) so hopefully the description will be enough.
I successfully combined swiper.js with twentytwenty for a project. In all modern browsers, including Microsoft Edge, both pieces work together.
<div class="swiper-container horizontal-slider">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide" data-hash="slide1">
<div class="twentytwenty-container"><img src="./img/projects/slide1_before.jpg" />
<img src="./img/projects/slide1.jpg" /></div>
</div>
<div class="swiper-slide" data-hash="slide2"><img src="./img/projects/slide2.jpg" /></div>
<div class="swiper-slide" data-hash="slide3"><img src="./img/projects/slide3.jpg" /></div>
<div class="swiper-slide" data-hash="slide4"><img src="./img/projects/slide4.jpg" /></div>
<div class="swiper-slide" data-hash="slide5">
<div class="twentytwenty-container"><img src="./img/projects/slide5_before.jpg" />
<img src="./img/projects/slide5.jpg" /></div>
</div>
<div class="swiper-slide" data-hash="slide6"><img src="./img/projects/4English-slide6.jpg" /></div>
<div class="swiper-slide" data-hash="slide7"><img src="./img/projects/slide7.jpg" /></div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination swiper-pagination-white"></div>
</div>
This is all with jQuery 3.2.1.
$(function(){
mainSwiper = new Swiper ('.swiper-container', {
// Optional parameters
loop: true,
spaceBetween: 10,
slidesPerView: 'auto',
loopedSlides: 5,
autoplay: {
delay: 2500,
},
keyboard: {
enabled: true,
},
hashNavigation: {
watchState: true,
},
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
});
$(".twentytwenty-container").twentytwenty({
default_offset_pct: 0.1, // How much of the before image is visible when the page loads
before_label: '', // Set a custom before label
after_label: '', // Set a custom after label
no_overlay: true, //Do not show the overlay with before and after
//click_to_move: true // Allow a user to click (or tap) anywhere on the image to move the slider to that location.
});
And with some jQuery to disable moving from slide to slide when selecting the "handle" you don't get a parallax effect (there are more parts for things like touch devices but that doesn't apply here).
$(".twentytwenty-handle").mousedown(function() {
if (mainSwiper.autoplay.running) { mainSwiper.autoplayWasRunning = true; mainSwiper.autoplay.stop(); }
mainSwiper.allowTouchMove = false;
}).mouseup(function() {
if (mainSwiper.autoplayWasRunning) { mainSwiper.autoplay.start(); }
mainSwiper.allowTouchMove = true;
});
I thought things were all set. And went to move on to testing when I discovered that the jquery.event.move script that twentytwenty needs has polyfill requirements for IE. Once those were sorted out everything loaded in IE. But when I clicked on the handle, nothing happened in regard to twentytwenty. The whole slide moved, and adding console.log inside the events showed they weren't triggering. I re-enabled the click_to_move option in twentytwenty and that works for moving the handle around. But that's obviously suboptimal.
Does anyone have any thoughts? Would you like more info? Should I be filing bug reports? Thanks!
Well, I feel silly.
While IE10 needs more polyfills (which seemed a bit odd). And IE9 is not supported anymore in Swiper. The general issue with IE discussed here is that the twentytwenty-handle lost its ability to be targeted. That is solved by using pointer events.
$(".twentytwenty-handle").on("pointerdown", function() {
if (mainSwiper.autoplay.running) { mainSwiper.autoplayWasRunning = true; mainSwiper.autoplay.stop(); }
mainSwiper.allowTouchMove = false;
})
.on("pointerup", function() {
if (mainSwiper.autoplayWasRunning) { mainSwiper.autoplay.start(); }
mainSwiper.allowTouchMove = true;
});
/* Flex Slider Teaser */
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: "fade",
animationLoop: true,
controlNav: "thumbnails",
start: function(slider) {
jQuery( '.flexslider' ).removeClass('loading');
}
});
});
i am using flex slider but in bottom side thoumbnil images is not showing in slider .\
i checked by http://flexslider.woothemes.com/thumbnail-slider.html
but it is not working , where should i edit in js ?? my code JS code is written above.
Can you show what HTML you are using in the slider? You need a data-thumb attribute in each slide that references to the actual thumbnail images.
For example:
<li data-thumb="images/thumb1.jpg">
<img src="images/slide1.jpg" />
</li>
I'm using JQuery cycle plugin to make a slideshow in HTML. I believe that I have done everything right but it's not in an actual slideshow frame, the pictures are just below eachother like this:
I'm asking for a fresh pair of eyes and brain to help fix this :)
Oh! Almost forgot, here's my code:
<script src="Scripts/jquery-1.6.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.cycle.all.js" type="text/javascript"></script>
<script src="js/modernizr-2.5.2-respond-1.1.0.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/twitter_search.js" type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/xml">
</script>
<div id="Slide#1">
<script type="text/javascript">
// BeginOAWidget_Instance_2827522: #OAWidget
$(window).load(function() {
$('#slider').flexslider({
namespace: "flex-", //{NEW} String: Prefix string attached to the class of every element generated by the plugin
selector: ".slides > li", //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
animation: "slide",
easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
direction: "horizontal", //String: Select the sliding direction, 'horizontal' or 'vertical'
reverse: false, //{NEW} Boolean: Reverse the animation direction
animationLoop: false, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end
smoothHeight: true, //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
slideshow: true, //Boolean: Animate slider automatically
slideshowSpeed: 5000, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 600, //Integer: Set the speed of animations, in milliseconds
initDelay: 0, //{NEW} Integer: Set an initialization delay, in milliseconds
randomize: false, //Boolean: Randomize slide order
useCSS: true, //{NEW} Boolean: Slider will use CSS3 transitions if available
touch: true, //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
video: false, //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
directionNav: true, //Boolean: Create navigation for previous/next navigation? (true/false)
controlNav: true, //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
keyboard: true, //Boolean: Allow slider navigating via keyboard left/right keys
mousewheel: false, //Boolean: Allow slider navigating via mousewheel
prevText: "Previous", //String: Set the text for the "previous" directionNav item
nextText: "Next", //String: Set the text for the "next" directionNav item
pausePlay: false, //Boolean: Create pause/play dynamic element
pauseText: "Pause", //String: Set the text for the "pause" pausePlay item
playText: "Play", //String: Set the text for the "play" pausePlay item
startAt: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide)
pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: true, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide
controlsContainer: "", //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: "", //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
// Carousel Options
itemWidth: 0, //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding.
itemMargin: 10, //{NEW} Integer: Margin between carousel items.
minItems: 0, //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this.
maxItems: 0, //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit.
move: 0, //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
before: function(){}, //Callback: function(slider) - Fires asynchronously with each slider animation
after: function(){}, //Callback: function(slider) - Fires after each slider animation completes
end: function(){} //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)
});
});
// EndOAWidget_Instance_2827522
</script>
<div id="main-container">
<p> </p>
<div id="main" class="wrapper clearfix">
<!-- FlexSlider -->
<div id="container">
<div id="slider" class="flexslider">
<ul class="slides">
<li> <img src="images/1.png" /> </li>
<li> <img src="images/2.png" /> </li>
<li> <img src="images/3.png" /> </li>
</ul>
</div>
<div id="carousel" class="flexslider" style="display:none;">
<ul class="slides">
<li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_donut.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_lemon.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_donut.jpg" /> </li>
<li> <img src="images/kitchen_adventurer_caramel.jpg" /> </li>
</ul>
</div>
</div>
</div>
<!-- #main -->
</div>
<!-- #main-container -->
</div>
If for some reason this isn't displaying correctly, here's a pastebin :)
http://pastebin.com/Zq5Xww6k
Thanks in advance,
CMNatic
I'm unfamiliar with this plugin but from the effects, it looks like the html and javasrcipt are not enough, looks like you are missing css,
for example here are the basics
.slides {
position: relative;
height: 200px; /*height required*/
width: 500px /* width required*/
}
.slides li {
position: absolute;
top: 0; left: 0;
}
I'm using the jquery cycle1 plugin for a slideshow with fade transitions between images, no previous or next controls. I need to layer text on top of this slider that changes color based on what slide is showing.
I'm not very fluent in jQuery so I'm having a hard time using the documentation to manipulate the available options. I've gotten this far thanks to this post and this one but the color changes slightly before or after depending on if I use before or after, obviously. How can I make the text color change at the same exact time the slide does?
Note: I have to use the cycle 1 plugin as my site uses jQuery 1.3.2 with no hope of upgrading.
here is a fiddle, and code below. Thanks in advance for any help!
here is my html:
<div id="text">this is some text over the slider</div>
<div id="switch-it">
<div id="slide1">
<a href="link1.html">
<img src="hp_hero_010114_01.jpg" height="500" width="980" border="0" />
</a>
</div>
<div id="slide2">
<a href="link2.html">
<img src="hp_hero_010114_02.jpg" height="500" width="980" border="0"/>
</a>
</div>
</div><!--//END switch-it-->
and here is the jQuery
$(document).ready(function(){
$('#switch-it').after('<div id="switch" class="switch">').cycle({
fx: 'fade',
speed: 800,
timeout: 500,
cleartypeNoBg: true,
height:'500px',
width:'980px',
pager:'#switch',
pause:1,
before: function (prev, current, opts) {
var current_id = $(current).attr('id');
if( current_id.match("slide1")){
$('#text').css('color','white');
}
else if( current_id.match("slide2")){
$('#text').css('color','red');
}
else if( current_id.match("slide3")){
$('#text').css('color','blue');
}
else if( current_id.match("slide4")){
$('#text').css('color','green');
}
},
pagerAnchorBuilder: function(index, el) {
return '•'; // whatever markup you want
}
});
});
It's not very elegant, but adding a timeout inside the before for half of your speed makes the change exactly in the middle of your transition.
setTimeout(function () { ...change text color }, 400);
JSFiddle
EDIT OR
Add a transition to your css for the #text for the same amount of time as your speed
#text {transition: color .8s linear}
JSFiddle
You might want to update to Cycle2 plugin it has what you are looking for
link
Down in "misc. bits" look for the state variable named 'busy';
I have this javascript code :
$(function(){
$('.words-gallery div:gt(0)').hide();
setInterval(function() {
$('.words-gallery > div:first')
.fadeOut(1000)
.next()
.delay(995)
.fadeIn(1000)
.end()
.appendTo('.words-gallery');},
3000);
});
This code will make a gallery from DIVs and every 3000 will hide the current DIV and show the next one.
I was trying to add next & back buttons but it's not working with me.
here is my fiddle:
http://www.jsfiddle.net/jUrNx
Any idea how to do it?
Why not use the jQuery Cycle plugin? It will let you do everything you're asking and more. There is even a specific example using "next/prev".
Here is a working fiddle: http://jsfiddle.net/3Qz5T/
Essentially, you would set up your code as follows:
HTML
<div class="nav"><a id="prev2" href="#">Prev</a> <a id="next2" href="#">Next</a></div>
<div class="words-gallery">
<div>1</div>
<div>22</div>
<div>333</div>
</div>
JS
$('.words-gallery').cycle({
fx: 'fade',
speed: 'fast',
timeout: 3000,
next: '#next2',
prev: '#prev2'
});