Flexslider startAt option and directionNav seem to conflict - javascript

I am using Flexslider 2.0 with the startAt option on the last slide.
This seems to mess up the directional navigation.
Anybody had this issue before and knows how to solve it?
The code I am using with nothing really special:
$(".period-slides").flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 265,
minItems: 4,
maxItems: 4,
controlNav: false,
directionNav: true,
prevText: "\ue75d",
nextText: "\ue75e"
startAt: 7
});
EDIT: Html added
<div class="period-slides">
<ul class="slides">
<li class="slide"><!-- repeated 8 times -->
<div class="period-overview">
<p>Some Content</p>
</div>
</li>
</ul>
</div>
EDIT: It doesn't seem to have a proper indication of at what position in currently is, seems like in the navigation the current position is the first slide. So I when setting the startAt it doesn't set the navigation properly.

Based on that HTML in your edit, you have 8 items in total which will be split into two slides of four.
I think the problem you are having is that setting startAt to 7 is too high - you only have two slides, so the index will need to be either 1 or 0.
When I set startAt to 7 the slider initially appeared blank and I had to navigate backward to get the final slide to appear. Setting startAt to 1 or 0 caused the correct slide to be displayed initially.

Related

How to do a calendar with jQuery (slide days as carousel)? No grid days. Only carousel days

I'm developing a calendar, which the days are shown with BX Slider.
Seven days are shown at time.
After click left arrow, previous 7 days are shown. Click right arrow, nexts 7 days are shown.
Reference: https://www.munchkinfun.com/miami/cal
Quite simple, but...
I tried Slick, FlexSlider and BX Slider. Slick and BX Slider came closer to the expected result. But both have some bugs. I posted the issues in both GitHubs, but I don't know if is possible to do what I want with other settings or other plugins.
Slick Slider
Fiddle: http://jsfiddle.net/w3x0cznq/1/
$(".slider").slick({
infinite: false,
slidesToShow: 7,
slidesToScroll: 5,
dots: false,
initialSlide: 24,
edgeFriction: 0,
});
Bug 1: Click left arrow to the first position and note that left edge is not reached. Left arrow finishes in day 04.
Bug 2: Change the active class to day 28 and run fiddle. Click left arrow and note that dots changed, but slick doesn't sliding.
BX Slider
There a similar bug. if 'moveSlides' == 1 then all works.
if 'moveSlides' > 1, the "dots navigation" doesn't changes, which indicates that some calcs are wrong. In the same fiddle, I have an option startSlide which doesn't works too. If uncomment the line and change moveSlides to 1, start slide will be DOMINGO 07 out. Note that the last day don't be reached.
Fiddle: https://jsfiddle.net/w3a97zyh/
What I want to do is quite simple, but I've been trying for a lot of days and I can not to solve.
I appreciate any help. Thanks!
I gave up the plugins Slick and BX Slider. I tried jCarousel and works fine. It's a little bit more work than others, because has no default CSS, BUT has no bugs (in my use).
Here's the fiddle with the final result: https://jsfiddle.net/m9nurv2f/10/
My default settings (please, see the fiddle):
$('.jcarousel')
.on('jcarousel:createend', function() {
$(this).jcarousel('scroll', $('.jcarousel li:eq('+get_initialSlide($('.jcarousel').find("ul"))+')'), false);
}).jcarousel();
$('.jcarousel-prev').on('jcarouselcontrol:active', function() {
$(this).removeClass('inactive');
}).on('jcarouselcontrol:inactive', function() {
$(this).addClass('inactive');
}).jcarouselControl({
target: '-=7'
});

Slick.js: Slick slider not dragging properly (snapping back to first slide)

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;

Using a slick slider with even number of slides to show

I'm using a slick slider on Center Mode where the number of slidesToShow is an even number.
The requirement i have is for the active slides to be at opacity 1 and the rest at opacity 0.5.
Slick js has a slick-active class that is applied to it automatically. Unfortunately the number of slides being even makes the implenetation wrong.
As seen in the picture the first half inactive slide on the left is at half opacity. I want the same for the 5th slide with 'slide-active' class. Somehow the nth-child and last-child selectors aren't working as I assumed.
What could be a work around?
try adding reduced opacity to slick-slide class and then apply full opacity to active slides.
$('.accom-slider').slick({
centerMode: true,
slidesToShow: 3
});
I've made something like this for my use, hope it can help:
http://test.woolet.co/slick-slider-centered/
$('.center').slick({
speed: 500,
arrows: false,
centerMode: true,
centerPadding: '0px',
slidesToShow: 3
});

nivo slider force next slide on navigation click

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/

jQueryUI and SlidesJS conflict

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;

Categories