I cant get out from what seems to be a simple conflict problem. I got a page using, jquery.1.8, jquery-ui.1.8.20, and pretty nice plugin for slideshows and carousel called SlidesJs (http://slidesjs.com).
Having both jQueryUI and SlidesJs loaded in the same page make slidesJS losing is slide transition effect animation (while moving from a slide to another). Everything working fine but this. I have my slides switching without the animation, anyway the speed of the sliding animation is keeped (my milliseconds are correctly waited before slide switch). Other transition effects like "fade" work fine.
I tried to add the jquery.easing plugin (http://gsgd.co.uk/sandbox/jquery/easing/) and explicitly use some easing effect but nothing changed.
This is my init configuration for SlidesJS.
$(function(){
$('#slides').slides({
preload: true,
generateNextPrev: false, //Default is false
container: 'slides_container', //Default is "slides_container"
pagination: true, //if slider use pagination, Default is TRUE
generatePagination: true,
slideSpeed: 250,
effect: 'slide, fade',
preloadImage: '../images/loading.gif',
play: 0,
});
});
Anyone with the same problem?
Try to remove divs around your images.
http://slidesjs.com/#docs
<div id="slides">
<div class="slides_container">
<img src="http://placehold.it/570x270">
<img src="http://placehold.it/570x270">
<img src="http://placehold.it/570x270">
<img src="http://placehold.it/570x270">
</div>
</div>
Open slides.jquery.js and find line 98 and 99
Find:
position = width*2;
direction = -width*2;
Replace:
position = option.width*2;
direction = -option.width*2;
Related
The Problem
I'm setting up a slick slider/carousel on a Wordpress website. Everything works/displays perfectly, however the slider has stopped dragging correctly.
I can still physically drag the slider with the mouse and it animates as it should, however when I let go of the slider it just snaps back to the first slide and never lets me navigate back or forward from the first slide by dragging
Using the prev and next arrows works perfectly, and so does using the arrow keys on the keyboard which makes me even more confused as to why the dragging doesn't work.
What I need
A fix for the dragging not working so that I can navigate through the slider properly.
**The slider is also broken in the same way on mobile when I swipe through the slider.
My Code
I can't link you to the slider as it's on a private site at the moment, but I will try to put all of the code I think is relevant below:
(I'm using the slick.min.js file and the slick.css file only from the download)
HTML
<div class="slider">
<div class="slider__item">
<a href="">
</a>
</div>
</div>
There are multiple slider__item's but they are created in a WP Loop of the posts so I have only included one
Leaving out content in slides so that this post isn't too long but imagine <p> and <div> tags for text/titles/images etc...
JS
$('.slider').slick({
infinite: true,
slidesToScroll: 1,
variableWidth: true,
dots: false,
arrows: true,
focusOnSelect: false,
prevArrow: $('.home-posts__arrow__prev'),
nextArrow: $('.home-posts__arrow__next'),
});
CSS
.slider {
position: absolute;
left: calc(33.333333% + 30px);
}
.slider__item {
max-width: 290px;
margin: 0px 15px;
}
Reference image
The slider is to the right of the content, "Test post 4" is the first slide that it always snaps back to. The blue squares are temp prev and next buttons
I hope that's enough info to go off but leave a comment if you need anything else, thanks in advance!
This is an old question, but I had the same issue. Dragging slides with Slick slider didn't work, slides snap back to the first slide. The fix for me was setting the touchThreshold to a higher number.
From the docs:
touchThreshold: To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider.
https://github.com/kenwheeler/slick/#settings
The default value is 5. I changed it to 100 and dragging slides works again:
touchThreshold:100
Have you tried adding the swipeToSlide option and setting it to true?
Have experienced the same requirements today, maybe this would help future searchers.
Try comment out or remove that line:
//max = _.slideCount * 2;
I have created a image slider, using the plugin Extra slideshow, this plugin is using Greensock and jQuery, but the problem is the sliding of the image is not smooth, if you notice, image is jerking while sliding.
Whats the expert suggestion here? how to avoid this jerk and make the slider super smooth, slideshow is going to be in full height/width screen .
Here is the JSFiddle demo
$(document).ready(function () {
// simple
$(".extra-slider").extraSlider({
draggable : false,
keyboard : true,
auto: 7,
speed: 5,
pagination: $(".slider-wrapper .pagination")
});
});
I got these two working, but having trouble with the execution. I'm assuming that one of them is loading faster than the other...
<div class="owl-carousel">
<% #project.project_images.each do |image| %>
<div class="bi-item">
<%= attachment_image_tag(image, :file, :fit, 1000, 430) %>
</div>
<% end %>
</div>
So I got this loop within the owl-carousel tag... and when the page loads, the images are really tiny (see first attached image)... if I drag my browser size, the images starts becoming responsive, and the size starts changing. Eventually the images will get to the correct size... I'm not sure what the issue would be, or what I need to do to get this working together. Is my assumption correct? If so, how do I make it load together?
my coffeescript
$(document).on 'ready page:load', ->
$(".owl-carousel").owlCarousel
loop: true
autoWidth: true
lazyLoad : true
Here's a screenshot, you can see the left side, its tiny
Then when I dragged the browser a little smaller, the image resizes, gets bigger
Then resized the browser larger, it becomes normal.
Alright, I think I got it...
I put the owl carousel function under window.load... this solved the issue for now. If someone else has another solution, or something that would be better, I'd like to know it still!
$(window).load ->
$(".owl-carousel").owlCarousel
loop: true
autoWidth: true
lazyLoad : true
Thanks
I had a similar issue this was what helped me:
// set owl-carousel width equals to owl-wrapper width (solves width issue on load)
function owlWrapperWidth( selector ) {
$(selector).each(function(){
$(this).find('.owl-carousel').outerWidth( $(this).closest( selector ).innerWidth() );
});
}
// trigger on start and resize (solves width issue on load)
owlWrapperWidth( '.owl-wrapper' );
$( window ).resize(function() {
owlWrapperWidth( $('.owl-wrapper') );
});
$(document).ready(function(){
// triggers owl Carousel
$('.owl-carousel').owlCarousel({
stagePadding: 0,
items: 1,
itemsDesktop:[1000,1],
itemsDesktopSmall:[979,1],
itemsTablet:[768,1],
pagination: true,
dots: true,
autoplay: 3000,
loop: true
});
});
please go to this Address:
http://pakianco.ir/test/index.php
on the above of page i use two different slideshow for displaying company products. these two slideshow must be consonant means that they must be start at same time and images used in two slideshow must be change Simultaneously.But it did not happen.
i use two different plugin for that. left slideshow is bootstrap carousel plugin and right slideshow is flux Slider.
this code is for right slideshow:
$(function(){
window.myFlux = new flux.slider('#slideshow', {
autoplay: true,
pagination: false,
transitions: ['blocks'],
delay: 5000
});
});
and this is for left slideshow:
$('#slides.carousel').carousel({
'interval': 5000,
'pause':'false',
'wrap':'false'
});
can you help me to doing that
I have the nivo slider working perfectly on a few sites.
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade',
animSpeed: 1000,
pauseTime: 8000,
controlNav: true,
manualAdvance: false
directionNav: false,
controlNavThumbs: false
});
});
Very happy, except for one thing...
When the slide transition is in process. I have to wait for it to complete before I can go to the next slide. This is a bad user experience if i have my slide transaition on 1 second. as it feels like a long wait if i want to click through quickly.
On other carousel banners, I can click through the nav buttons very quickly back and forth and the effect keeps up and dynamically changes direction.
Can't find anyone else asking this or a fix so assume I am missing something. How can I have this effect with nivo slider?
You can see the same issue exists on the nivo slider demo http://demo.dev7studios.com/nivo-slider/ although it's difficult to notice as the images change shape so the navigation moves.
Thanks
EDIT: Added JSFiddle. http://jsfiddle.net/micjam/Bq3nT/