I have a slide show component I've been working on that is a mash up of jcycle and jcarousel. It works rather well, yet there is one last feature I'd to add that I cannot figure out. Right now if you click on a thumbnail it will center it in the carousel as long as it's not the first 2 or last 2 thumbs. This works great and I like centering the active thumbnail of the slide show.
The problem I'm running into is if the user hits the play button on the slide show or the next and previous slide buttons, the slide show cycles, yet the active slide thumbnail does not center in the carousel. I've tried unsuccessfully to check if the thumbnail anchor has class, activeSlide, and if so to center it, yet cant seem to get it to work.
Here is a link to the demo page I've been working on.
http://brettjankord.com/standards/slideshows/jslideshow-test2.php
Any help is greatly appreciated!
Put the following at the end of your onBefore method
var carousel = $('#mycarousel').data('jcarousel');
var activeIdx = $('#mycarousel img[src="'+next.src+'"]').closest('a').data('index') -2;
if (carousel)
{
carousel.scroll(activeIdx);
}
Demo at http://jsfiddle.net/JupPn/1/
Related
I am using bootstrap carousel but I need a very simple thing to be done. My carousel is placed in the bottom of the page and I want to stick to the 1st slide of the carousel until the user reaches this section. As soon as the user will reach the section,the carousel will start playing. I do not know how to achieve this. Please help me with ideas.
Thanks in advance!
According to http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
The .slide class adds a CSS transition and animation effect, which
makes the items slide when showing a new item. Omit this class if you
do not want this effect.
So all you need to do is to add that class when the user scrolls to that element...
As in, for the example given on the link I mentioned above, the element with id='myCarousel' must be given the .slide class.
Hence, using the jquery, the code will be as follows:
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>=($("#myCarousel").offset().top){
$("#myCarousel").addClass("slide");
//ANYTHING YOU WANT TO DO WHEN THE USER SCROLLS TO YOUR CAROUSEL.
}
})
});
NOTE: CODE NOT TESTED.
You can do it like that.
After doing quite a lot of research,finally I got this solution.I have mangaged to go back to the first carousel when I reach a specific portion.(Here the section where carousel does exist)
My code is:
$(document).ready(function(){
$(window).scroll(function(){
console.log($("#myCarousel").offset().top);
if($(window).scrollTop()>=$("#myCarousel").offset().top-70 && $(window).scrollTop()<2450 )
{
var index = $('.slides li').index($('.slides li:first'));
console.log(index);
$('.flexslider').data("flexslider").flexAnimate(index);
}
})
});
I'm looking for a responsive jQuery carousel content slider with custom/different/auto widths that scrolls by one item and aligns based on the direction.
For example if the user clicks on the right navigation arrow it should slide slide by one item to the first not fully visible item and it should be aligned to the right end of the viewport and if the user clicks on the left navigation arrow the slider should slide by one item to the first not fully visible item on the left end of the viewport and align it to the same end.
I've spent a couple of days searching for such carousel but so far with no luck. Some of the sliders/carousels I've looked into are: LightSlider, slick, Flickity, Glide, UIkit (getuikit) and more. I've even written a new navigation logic for Flickity using its API which almost does it but it's buggy and with a lot of animation problems.
$(document).ready(function() {
$('#autoWidth').lightSlider({
autoWidth:true,
loop:false,
pager:false,
prevHtml:'<',
nextHtml:'>',
onSliderLoad: function() {
$('#autoWidth').removeClass('cS-hidden');
}
}).goToSlide(6);
});
As a behavioural example open this link http://codepen.io/matthewd/pen/BKvjWM, click the left and then the right arrow.
Any suggestions would be highly appreciated.
Thank you!
I am trying to integrate Royal Slider within my website. However I am having trouble with the first slide when the slider is within tabs on my page.
For example, you can see at http://christierichards.co.uk/slidertest/newtemplatefix.php that the slider is working perfectly (there is no styling as of yet).
On this page http://christierichards.co.uk/slidertest/newtemplate.php when you click on before and after (this is the tab I want the slider appearing in) the first slide does not show until you click tab 2 and then the height seems to appear.
I have managed to fix it within the tabs but this is only by adding a fixed height onto .rsOverflow. I cannot use a fixed height as I need the auto-height feature to work for clients to add their own photos. So I need a different way around it.
There must be a piece of conflicting code somewhere however I am stumped! Any help would be appreciated.
Thanks
The slider is being initialised while it is hidden behind a tab. Because of this, it cannot calculate its height and width, and is invisible. When you change to the next item in the slider, the heights and widths are recalculated, which is why you can see it again.
You can either add an initial height to .rsOverflow, or (re)initialise the slider when the tab is clicked, and the contents are made visible.
For example:
var sliderInitialised = false;
$j( "#tabs" ).tabs({
activate: function( event, ui ) {
// Check the activated tab, is the one that contains the slider
if(!sliderInitialised) {
// Initialise slider ...
sliderInitialised = true;
}
}
});
Alternatively, the slider could be initialised before all the tab contents are hidden.
I'm trying to create a simple slide animation with AngularJS.
I have a feedback tab that when someone click on it it will slide from right to left and will open, another click will do the animation again and will close it.
The thing is i'm not sure how to create the slide animation.
I read about that that ng-animation is obsolete and now i need to use class and it automatically hook on ng-hide and ng-show
I have 2 div elements:
<div class="feedback-close" data-ng-hide="feedback_open" data-ng-click="feedback_open = !feedback_open"></div>
<div class="feedback-open" data-ng-show="feedback_open" data-ng-click="feedback_open = !feedback_open"></div>
i need some code that will make the slide animation from close to open and from open to close.
can anyone help me out ?
a nice slide example will be in here : http://feedback-me.appspot.com/example_bootstrap.html
Im trying to write a simple script that slides the next 'slide' div in on a button click, I have 3 divs all inline, left alligned. theyre all set to a width, on 'next' button click id like the next slide to slide in, ive made the following fiddle only I cant seem to get it working...
Can anybody see where im going wrong?
http://jsfiddle.net/x2qk7/
Thanks
I think the problem is the positioning and the initial value of left. Try something like this:
.slide {width:788px;float:left;left:0;position:relative;}