Caroufredsel showing partial images - javascript

My caroufredsel carousel is showing 8 images at a time and then sliding across the screen to show another 8. However, for the first four times the carousel slides, a partial image on the right shows instead of a complete image. After four slides, the carousel snaps to where it is supposed to be and show all images correctly from then on. Am I doing something wrong? Is there a setting I need to use that I've missed?
Here is the link.
http://dev.mattresstime.co.uk/cheapbeds/mattresstime/index.php
This is the jQuery
$j("#manufacturer_list").carouFredSel({
width:904,
height: 81,
items: {
visible: 8,
minimum: 1,
width: 113,
height: 81
},
scroll: {
pauseOnHover: true
},
swipe: {
onTouch : true,
onMouse : true
},
prev : "#prev_button",
next : "#next_button"
});

Related

SwiperJS move more than just one slide on click

I want to implement the feature, when I click arrow it moves 3 or 4 slides to the right or to the left, not just one slide.
I am working with Angular
Feature, when it moves one slide works, but I can't get moving more than just one slide to work.
Here is code for moving just one slide to the right or to the left
scrollLeft() {
this.swiper!.swiperRef.slidePrev(500);
this.scrollArrows();
}
scrollRight() {
this.swiper!.swiperRef.slideNext(500);
this.scrollArrows();
}
Config:
swiperConfig: any = {
slidesPerView: 'auto',
loop: true,
spaceBetween: 20,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
};
Thanks for everyone to help.

jQuery Scrollify - first section ignores offset

First time using jquery-scrollify. I have a page with a border around it and each section is meant to start 24px from top of page so it starts below the border. Without scrollify my CSS does this fine. Once I implement scrollify, even with the correct offset option, the page is always scrolled so that the top of this first section is right at the top of the page. Once I start scrolling to lower sections, they are respecting the offset and aligning properly. It seems the offset options is ignored for the first section? Is there any way to make the offset apply to the first section / start of page?
HTML
<section class="hero-home">
<div class="slide" style="background-image: url('/img/hero-home1.jpg')"></div>
<div class="slide" style="background-image: url('/img/hero-home2.jpg')"></div>
<div class="slide" style="background-image: url('/img/hero-home3.jpg')"></div>
<div class="slide" style="background-image: url('/img/hero-home4.jpg')"></div>
</section>
JS
var scrollOffset = -24;
$.scrollify({
section: ".slide:visible",
offset: scrollOffset,
easing: "easeOutQuint",
scrollSpeed: 800,
scrollbars: true,
setHeights: false,
updateHash: false,
touchScroll: true
});
The -24 offset is to account for a fixed position frame I have at top of the page. When a new "section" is scrolled to the top, it should stop 24px from top of page rather than right at the top, otherwise it goes under the frame.
The first "section" starts in the right place before I initiate scrollify (my CSS on a containing element has top padding equal to height of the frame). However once scrollify is added, the page is scrolled down 24px so that the first "section" appears right at the top of page. The "offset" options corrects this on all subsequent sections (2nd, 3rd, and 4th section appear at the right place when I scroll down) but the 1st section's initial position is incorrect and ignores the offset option value.
I struggled with this issue as well, to fix this issue you want to provide some handling in the before event.
Solution Example
$(document).ready(function() {
$.scrollify({
section : ".fp-section",
offset:-200,
setHeights:false,
//Add the offset for the first element here:
//snapToElm is the list of element pages
before:function(indexPosition,snapToElm){
if(indexPosition===0){
snapToElm[0].css({"margin-top":"200px"});
}
if(indexPosition>0){
snapToElm[0].css({"margin-top":"0"});
}
},
afterRender:function(){
//set the first element initially to the desired offset
$($(this.section)[0]).css({"margin-top":"200px"});
// stuff to do once scrollify has rendered the list
}
})
});
$.scrollify({
section: "section",
interstitialSection: ".fourth-view,footer",
easing: "easeOutExpo",
scrollSpeed: 1100,
offset:0,
scrollbars: true,
standardScrollElements: "",
setHeights: false,
overflowScroll: true,
updateHash: false,
touchScroll: true,
before: function () {
},
after: function () {
},
afterResize: function () {
},
afterRender: function () {
}
});
if ($.scrollify.current().hasClass('second-view')) {
$.scrollify.setOptions({offset: 0})
}
else {
$.scrollify.setOptions({offset: -64.5})
}
and also
$(window).on('scroll', function () {
if ($.scrollify.current().hasClass('second-view')) {
$.scrollify.setOptions({offset: 0})
}
else {
$.scrollify.setOptions({offset: -64.5})
}
});
remove offset for second section
Change the source code line 660 of jquery.scrollify.js
if(i>0) {
heights[i] = parseInt($this.offset().top) + settings.offset;
} else {
heights[i] = parseInt($this.offset().top);
}
Change to
heights[i] = parseInt($this.offset().top) + settings.offset;
The version of jQuery Scrollify is 1.0.20
I tried the solution below but finally I just added the "section / slide class" to my header or navbar (<header class="slide navbar otherclasses..."></header>) that make my navbar the first element, it may not fit anyone but in my case its by far the most confortable for my users.
Edit : you need to set setHeights: false otherwise its not going to work well.

Royal Slider and Lightbox, thumbnails container doesnt get width

Im having a bit of trouble of getting a Royal Slider working in a lightbox - If you take a look at this page: http://www.wearewebstars.dk/frontend/Test/boerneunivers2.html - And then click the arrow, where it says "Hvad er Myanmar" - Then it opens a lightbox with a gallery - However, the container of thumbnails only get a width of 36px - But the if I resize the window, then it gets the full width of all the thumbnails, and places the thumbnails correctly - Any ideas? I've tried resizing the window programmaticly, but cant get it to work:
The script I have is:
$(".toggle-gallery-8").on("click", function(event){
$('#gallery-8').royalSlider({
fullscreen: {
enabled: true,
nativeFS: true
},
controlNavigation: 'thumbnails',
autoScaleSlider: true,
autoScaleSliderWidth: 960,
autoScaleSliderHeight: 850,
loop: false,
imageScaleMode: 'fill',
navigateByClick: true,
numImagesToPreload:5,
arrowsNav:true,
arrowsNavAutoHide: true,
arrowsNavHideOnTouch: true,
keyboardNavEnabled: true,
usePreloader: true,
fadeinLoadedSlide: true,
globalCaption: true,
globalCaptionInside: false,
updateSliderSize: true,
thumbs: {
appendSpan: false,
firstMargin: true,
}
});
$('#gallery-8').royalSlider('updateSliderSize', true);
/*if($(".window.fade.in").length() > 0){
$(".window").trigger("resize");
}*/
});
Looking on the developer site I found that it's a known issue that sometimes happens.
If slider size is dynamic: try to resize your browser, if after
resizing layout looks correctly - this is the issue.
If slider size is static: change size of root slider element via
Chrome Web Inspector or Firebug and resize browser window. Or just run
jQuery('.royalSlider').royalSlider('updateSliderSize', true); in
console and see if it fixes your problem.
Doc: http://help.dimsemenov.com/kb/royalslider-jquery-plugin-issues/slider-content-area-shrinks
You can try to call updateSliderSize method:
setTimeout(function () {
$('.royalSlider').royalSlider('updateSliderSize', true);
}, 500)
after the slider definition, the setTimeout is needed to handle a little timing issue.

carouFredSel: Show partial items?

I'm using carouFredSel to create a vertical carousel. Everything works great, except I would prefer if partial items would be shown at the bottom, cropped, rather than being hidden. This way it would indicate to users that there are additional items that can be scrolled.
I have been reading the documentation, but so far can't tell if what I am after is possible.
Check out the JSFiddle to see what I mean. Watch the bottom most item on the page.
Javascript
$("ul").carouFredSel({
direction: "up",
align: "top",
width: 100,
height: "100%",
items: {
visible: "variable",
width: 100,
height: "variable"
},
scroll: {
items: 1,
mousewheel: true,
easing: "swing",
duration: 500
},
auto: false,
prev: {
button: ".prev",
key: "up"
},
next: {
button: ".next",
key: "down"
}
});​
This is a bit of a hack, but it works. Set the height of the scroller (in this case, ul) to 150% and the parent element (in this case, body) to overflow: hidden. Now the bottom most element is off screen.
Javascript
$("ul").carouFredSel({
height: "150%"
});
CSS
body {
overflow: hidden;
}
Ha, caroufredsel supports it, no hacks required :))! You can achieve it with the following option:
items: {
visible: '+1'
}
EDIT: This suffers from a problem though. If number of whole visible items + 1 == number of all items, then carousel cannot be scrolled even though one image is visible just partially. You can overcome this issue by setting e.g. minimum: 1 but it is not always a way to go (e.g. if number of images is dynamic and you don't want scroll handlers to appear when there is just one or two images.).
The next not visible element in the vertical carousel is pushed down by the margin.
I'm currently overriding it by the following function:
function cropCarousel () {
var visibleElements = this.triggerHandler("currentVisible"), // show all visible
$lastElement = $(visibleElements[visibleElements.length - 1]); // get the last one
$lastElement.css('margin-bottom', '30px'); // amend the margin
};
cropCarousel.call($('#your_carousel_id'));
The downside of it that you will have to call this function on carousel init and on up and down events. But it works ;)

How can I alter anythingSlider so that it disables the next / previous buttons when only 1 <li> in the <ul>?

I have a page with multiple instances of anythingSlider on it and I'm using PHP to dynamically load pages that swap out the content in them.
Reference: http://ceedcreative.com/CEED_2.0/
I would like to edit the anythingSlider to disable the previous / next buttons if the UL it's displaying only has one LI within it.
In other words, no buttons, just a clean div that's the same heigh and width (no scrolling) if there's only one image.
Try this
$('.anythingSlider:not("#topSlider")').each(function(i, slider) {
// If any slider has less than 2 let members
if ( $("ul li", slider).length < 2 ) {
// don't apply the slider functionality
return;
}
$(slider).anythingSlider({
easing: "easeInOutExpo",
autoPlay: false,
delay: 3000,
startStopped: false,
animationTime: 600,
hashTags: false,
buildNextPrevButtons: true,
buildNavigation: false
});
});
If, for some reason, that doesn't work, this snippet will inspect the list length of every anythingSlider and hide the arrow buttons for any list that is only 1 in length (after excluding the front and back clones).
$(".anythingSlider").each(function(i, slider) {
if ( $("ul li", slider).not(".cloned").length == 1 ) {
$(".arrow", slider).hide();
}
});

Categories