I want to use 2 jQuery Flexsliders in the jQuery tabs. The slider on the tab 1 works fine, but it does not work in the tab 2.
Here is the full demo of the code on JSFiddle:
Demo:
http://jsfiddle.net/vH5DT/
jQuery Code:
$(document).ready(function() {
$('#tabvanilla').tabs({
hide: "heightFade",
show: "heightFade",
collapsible: true
});
$('#flexslider1').flexslider({
animation: "slide",
slideshow: true,
controlsContainer: ".flex-container1",
directionNav: true,
controlNav: true
});
$('#flexslider2').flexslider({
animation: "slide",
slideshow: true,
controlsContainer: ".flex-container2",
directionNav: true,
controlNav: true
});
});
HTML:
<div id="tabvanilla">
<ul class="tabnav">
<li>Tab1</li>
<li>Tab2</li>
</ul>
<div id="tab1" class="cf">
<div id="flexslider1" class="flexslider">
<ul class="slides">
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
</div>
<div class="flex-container1"></div>
</div><!-- div#tab1 -->
<div id="tab2">
<div id="flexslider2" class="flexslider">
<ul class="slides">
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
</ul>
<div class="flex-container2"></div>
</div>
</div><!-- div#tab2 -->
</div><!-- div#tabvanilla -->
There are a couple possible approaches to the problem that the slider script can't act on hidden elements--either re-initialize the slider script on each tab click, or use
position: absolute;
left: -999em;
and then
left: auto;
rather than
display: none;
for the tabs.
You'll need to init your flexslider when visible (on tab change)
I think you can do something like this :
$('#tabvanilla').tabs({
hide: "heightFade",
show: "heightFade",
collapsible: true,
select: function(event, ui) {
switch (ui.index) {
case 0:
// nothing to do since this is selected by default on page load
break;
case 1:
$('#flexslider2').flexslider({
animation: "slide",
slideshow: true,
controlsContainer: ".flex-container2",
directionNav: true,
controlNav: true
});
break;
}
}
});
I want to contribute with another solution that works fine for me.
I diving into the code and I use firebug to discover that Andres is right. The problem is because all hiddens at the beginning has their width setted to 0.
When I opened firebug everything works fine, hiddens take the right width.
Well, I do that:
I putted this piece of code after the click event and the transition:
fixWidth = $next_slide.css('width'); // I take the width of the new active slide
$flexslide_tab = $next_slide.find('.flexslider'); // Localize flexslider inside active tab
$ul = $flexslide_tab.find('.slides'); // Localize <li> container
$lis = $ul.find('li'); // Get all <li> elements
$lis.each(function(i,elem) {
$(this).css('width',fixWidth); // I adjust every <li> width from the new slide
});
I hope it will be useful.
May be this will be help for you..
Add this script to the first tab content page
$(window).load(function () {
initFlexSliders();
});
function initFlexSliders() {
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 100,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "fade",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel",
start: function (slider) {
$('body').removeClass('loading');
}
});
$('#carousel-1').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 100,
itemMargin: 5,
asNavFor: '#slider-1'
});
$('#slider-1').flexslider({
animation: "fade",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel-1",
start: function (slider) {
$('body').removeClass('loading');
}
});
}
for other tabs insert this at the bottom of the content.
initFlexSliders();
Related
I just created a sample slick slider with fadein and fadeout effect. I want to add a once second delay between fadein and fadeout effect of these slider images. i.e after fadeout of once slide image there should be one second gap to the next slider image fadein. Below is my code and code pen link.
Here is Code
$(document).ready(function($) {
$('.slider').slick({
dots: false,
arrows: false,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
fade:true,
autoplay: true,
speed: 2000,
cssEase: 'linear',
pauseOnHover:true,
responsive: [{
breakpoint: 767,
settings: {
arrows: false,
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="slider">
<div class="img-container"><img src="https://cdn.pixabay.com/photo/2018/04/26/16/39/beach-3352363_960_720.jpg">
</div>
<div class="img-container"><img src="https://cdn.pixabay.com/photo/2018/04/26/16/31/marine-3352341_960_720.jpg">
</div>
<div class="img-container"><img src="https://cdn.pixabay.com/photo/2016/03/08/20/03/flag-1244649_960_720.jpg">
</div>
</div>
Code pen Link: https://codepen.io/dSaif/pen/ExaaQJV
Please help me how can i do this
I have created a logo slider which displays similar to marquee. What I want to do is to add next/prev arrows that can accelerate the speed of slider when click next arrow and reverse the slider when click prev arrow. I currently use slick carousel to make it.
Also I have no idea why sometimes my carousel pause for a second then continue, can anyone help me with this?
$(document).ready(function($) {
$('.marquee-logo').slick({
autoplay: true,
infinite: true,
autoplaySpeed: 0,
slidesToScroll: 1,
slidesToShow: 5,
arrows: false,
cssEase: 'linear',
speed: 6500,
initialSlide: 1,
draggable: false,
});
});
<div class="marquee-logo">
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
</div>
http://codepen.io/takumi24/pen/JRzEjA
This can be used to make slider slow
$("#slowbutton").click(function(){
$('.marquee-logo').slick('unslick');
$('.marquee-logo').slick({
autoplay: true,
infinite: true,
autoplaySpeed: 0,
slidesToScroll: 1,
slidesToShow: 5,
arrows: false,
cssEase: 'linear',
speed: 10000,
initialSlide: 1,
draggable: false,
});});
This for making faster
$("#nextbutton").click(function(){
$('.marquee-logo').slick('unslick');
$('.marquee-logo').slick({
autoplay: true,
infinite: true,
autoplaySpeed: 0,
slidesToScroll: 1,
slidesToShow: 5,
arrows: false,
cssEase: 'linear',
speed: 300,
initialSlide: 1,
draggable: false,
});
});
http://codepen.io/anon/pen/yawgra
On button click first destroy the slider and add slider again with increased/decreased speed
You can also try by this $('.marquee-logo').slick('slickSetOption', 'speed', 500,true); with out destroying the slider
But speed change by slickSetOption method cause a delay:issue https://github.com/kenwheeler/slick/issues/2334
User XZY's answer worked for me. While playing with it I also noticed that slick (at least in the implementation I was using) exposes an options property which is modifiable. So the below might work as well:
var slickSlider = $('.marquee-logo')[0]
slickSlider.slick.options.autoplaySpeed = 500
I have no knowlege in JS so please help me with it. I have a slider (Slider JS) I need to make the slider to stop on hovering it and when the cursor is moved away it should resume again.
I refered this slidejs website which is here and i found this code which did not work form me
$(function(){
$("#slides").slides({
hoverPause: true
});
});
Here is my JS code
jQuery.noConflict();
jQuery(function() {
jQuery(".slider_container").jCarouselLite({
btnNext: ".arrow_right",
btnPrev: ".arrow_left",
visible: 4,
speed :1000,
auto : 500,
hoverPause: true,
});
});
Html
<div id="slide_image_contener" class="slider_container">
<ul id="slide">
<li><a class="vlightbox1" href="popup/vlb_images1/certification_1.jpg" title="certification_1"><img src="popup/vlb_thumbnails1/certification_1.jpg" class="vlightbox_1" alt="certification_1"/></a></li>
<li><a class="vlightbox1" href="popup/vlb_images1/certification_1.jpg" title="certification_1"><img src="popup/vlb_thumbnails1/certification_1.jpg" class="vlightbox_1" alt="certification_1"/></a></li>
<li><a class="vlightbox1" href="popup/vlb_images1/certification_1.jpg" title="certification_1"><img src="popup/vlb_thumbnails1/certification_1.jpg" class="vlightbox_1" alt="certification_1"/></a></li>
</ul>
</div>
You have error in code.
Your JS is referring to #slides:
$(function(){
$("#slides").slides({
hoverPause: true
});
});
But you are using ul id="slide"
Change this line: <ul id="slide"> to this: <ul id="slides">
The options which you are passing is wrong. You should pass pause instead of hoverPause Try the below code
jQuery(".slider_container").jCarouselLite({
btnNext: ".arrow_right",
btnPrev: ".arrow_left",
visible: 4,
speed :1000,
auto : 500,
pause: true
});
OK so I have a Jquery plugin that works great and all except it puts all of the images on top of each other until the plugin has finished loading, and then they all go into place. Is there a way to have the first image be a placeholder for the size 843 w 345 h and have it load hidden until they are all ready so my page site doesn't expand down then back up when it has loaded. thanks!
$(window).load(function(){
$('#slide-me').carousel({
style: 'fade',
transitionSpeed: 'slow',
carouselSpeed: 3500,
arrows: true,
buttons: false,
buttonsTheme: 'lines',
stopOnHover: false,
carouselHeight: 'crop',
carouselWidth: 'crop'
});
});
html
<div id="slide-me">
<img src="/tour/images/bigslider1.jpg" />
<img src="/tour/images/bigslider2.jpg" />
<img src="/tour/images/bligslider3.jpg" />
<img src="/tour/images/bligslider4.jpg" />
<img src="/tour/images/bigslider5.jpg" />
</div>
Give it a try, worked for me:
$(function(){
setTimeout(function(){
$('#slide-me').carousel({
style: 'fade',
transitionSpeed: 'slow',
carouselSpeed: 3500,
arrows: true,
buttons: false,
buttonsTheme: 'lines',
stopOnHover: false,
carouselHeight: 'crop',
carouselWidth: 'crop'
});
},500);
});
I actually got the answer for this and wanted to share in case anyone wanted to see it.
In my css all that was needed to do was this
#slide-me img { display: none; }
#slide-me img:first-child { display: block; }
Which allowed the first image to be shown first and hide the rest while script loaded.
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;
}