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!
Related
I am using FullPage.js plugin, When on slide 2, 3, 4 and when the menu bar is visible and when i click the Signup link on the Menu bar i want to have a smooth scroll to the first slide. But the following code seems to jump to the slide 1 directly. Is there a way to make it a cool scroll sliding effect.
Also i want to focus on the Email Text Box upon reaching the slide. That does not seem to happen either.
$('.highlight a').click(function(){
$.fn.fullpage.setAllowScrolling(true, 'all');
$.fn.fullpage.moveTo(1, 0);
$('.input-hero').focus();
});
Testing
I am trying to create something similar to this effect, where you can click on the hamburger icon and a menu slides out:
http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/
I don't need the hover event, just the click.
My problem is that in the above example, there is already space allocated for the menu to live. In my situation, I need my main content to shrink to make room for the menu. So, using Bootstrap, I am switching my main content from the "col-md-12" class to the "col-md-11" class, so that my menu with the "col-md-1" class can fit:
$('#toggle').mousedown(function () {
$('#mainMenu').toggleClass('col-md-1');
$('#mainMenu').toggleClass('zero');
$('#mainContent').toggleClass('col-md-12');
$('#mainContent').toggleClass('col-md-11');
});
I have attempted something here:
http://jsfiddle.net/955RV/
But it's not quite right. The negative margin trick is because I'm not sure how else to bring in the menu from the left. I also am not happy with the right side of the content shrinking in animation before the menu appears and would prefer it to happen simultaneously. My guess is that they are technically happening simultaneously, but that the margin animation takes longer to complete than the width animation.
Any help would be appreciated. Let me know if I can help clarify anything.
This looks like a great place to start:
http://tympanus.net/Blueprints/SlidePushMenus/
Notice the difference between the "push" and "slide" type menus. I was looking for "push."
Code explained here:
http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/
I've developed one page using jCarousel within jQuery ui Tabs.
Following page is what I got:
http://knowledge.teldap.tw/knowledgeFB/my_creation/?fid=668330535
Problem is:
If you click the 3rd tab (only one item), you'll find nothing unless you click the left arrow to navigate. It's weird because one the 1st tab ( more than one items) everything is normal and visible.
Can anyone find out what I've missed? Because I've struggled on this for several hours.
Thanks!
The problem is the width of your carousel image has not been adjusted properly
In your jquery,put scroll 1
jQuery('#listelements').jcarousel({
scroll : 1,
And also adjust the height of the container
.jcarousel-skin-tango1 .jcarousel-container-horizontal {
width: 1200px;
height:630px;
margin-left://adjust margin left here
}
You may have a look on this carousel example
This is probably a simple problem I'm having, but for the life of me, I can't seem to figure it out. If any of you could help me with this, I would be much obliged.
I'm using JQuery to make a menu appear when a user hovers over a certain div. The menu will be displayed on the top left of the div.
I got this to work, but when I try to click on a menu item of the div that appeared, the div disappears again, because the mouse is technically not over the div, but over the menu.
In the example below, "#blockMenu" is the menu that dynamically appears. I fade the current div ($this)) out a bit, to emphasize the menu as well.
I use the following code to make this happen:
$("div.editable").hover(function () {
$(this).fadeTo(500, 0.25);
$('#Menu').css("position", "absolute");
$("#Menu").css("top", $(this).offset().top);
$("#Menu").css("left", $(this).offset().left);
$("#Menu").css("zIndex", "10000");
$('#Menu').show();
}, function (e) { // on mouseout
$(this).fadeTo(500, 1);
$("#Menu").hide();
});
I want the menu to disappear when the cursor leaves the div, while the div remains faded out when the cursor is on the menu. When the cursor leaves the menu AND the div at the same time, the div should fade back in and the menu should disappear.
Does anyone have an idea of how I could edit my code to make this work correctly?
Thank you very much for any help you can give me.
Just use the :hover pseudo class, that's likely to help the situation. You'll lose animation effects, but it could sure make things easier, and take javascript out of the picture
Add a hover function for the menu and set some state when the mouse is hovering over the menu and only take the menu down if the mouse is not over the div AND not over the menu.
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/