I recently completed a website for a photography friend and he came back to me saying that the sliders on his project pages were hard to use and he would like arrows, whenever I have tried adding arrows into it I've found the Navigation pushes the arrows out of view, I was wondering if anyone knows of a way of fixing this.
Please see the link below to the page. Thank you in advance.
Daniels Website
The website you linked uses Swiper, which is a framework for sliders. According to the Getting Started, you need to add two arrows, which your friend seems to have commented out. Since your site has jQuery, you also need to initialize it within the document.ready event. Try putting the code within the event like this:
$(document).ready(function () {
//initialize swiper when document ready
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
spaceBetween: 0,
loop: true,
centeredSlides: true,
autoplay: 7000,
autoplayDisableOnInteraction: false,
slidesPerView: 1,
effect: 'fade'
})
});
Related
I have a slider that I want to set to autoplay and have a fade effect. Everything works fine when using the normal slide effect but after I added the fade it stops working after 1 fade. It's also not fading but just instantly changing to the next slide, only when I manually use my mouse to slide it shows a fade effect.
What could be the issue?
In my js file I import the 'EffectFade' like this:
import Swiper, {Autoplay, Navigation, Pagination, EffectFade} from 'swiper';
Swiper.use([Autoplay, Navigation, Pagination, EffectFade]);
Then my swiper code:
new Swiper('#agrarisch .swiper-container', {
slidesPerView: 1,
// spaceBetween: 30,
effect: 'fade',
autoplay: {
delay: 2500,
},
navigation: {
nextEl: '#agrarisch .swiper-button-next',
prevEl: '#agrarisch .swiper-button-prev',
}
});
Example video
The same problem arose for me.
In my case, I solved it by loading "swiper-bundle.min.css" instead of "swiper.min.css".
I'm using SwiperJS in my project and i tried to create a swiper with a pagination. Everything is working expect when Swiping the Pagination Dots arent updating correctly. Only when reaching the first or the last slide it will update. But clicking on the dots works.
My Swiper Configuration:
releasesSwiper = new Swiper('.swiper.next-releases', {
// Optional parameters
slidesPerView: 6,
spaceBetween: 20,
direction: 'horizontal',
loop: false,
initialSlide: 0,
centeredSlides:false,
createElements: false,
effect: 'slide',
roundLengths: true,
autoplay: false,
cache: false,
// If we need pagination
pagination: {
el: '.section-content.next-releases .swiper-pagination',
clickable: true,
},
});
plus my HTML:
<div class="swiper section-content next-releases hidden">
<!-- Additional required wrapper -->
<div class="swiper-wrapper section-content-wrapper">
</div>
<div class="swiper-pagination"></div>
</div>
I already tried calling the swiper.pagination.update function manually after swiping but that didn't work either.
I also have another Swiper on the same site that works so i dont know why this one should not.
I'm using the latest version of SwiperJS.
The answer to this was relatively simple: The initialization of the swiper class was in a for loop and caused problems because of it.
I'm trying to create a vertically scrollable and draggable list with swiper.js, and I've almost reached the goal. There is only one issue left:
The mousewheel scrolling feels very laggy. After every scroll, there is a small delay before the next one is registered. Check out the behavior here:
http://idangero.us/swiper/demos/20-mousewheel-control.html
This is my configuration so far:
this.swiper = new Swiper(this.$el, {
direction: 'vertical',
centeredSlides: true,
spaceBetween: 0,
grabCursor: true,
slidesPerView: 'auto',
mousewheelControl: true,
}
I haven't found a way to disable this. The only property that sounds like it could help, mousewheelSensitivity, does not seem to change the behavior at all.
Is this even possible or do I need to change swiper.js internals for this to work?
I have the same issue, and haven't found a final answer for this, however, I noticed that adding the next options helps a little:
mousewheelSensitivity: 0,
mousewheelReleaseOnEdges: true,
If you have found any other solution, please share it with us.
Mousewheel Methods & Properties:
function disableScrolling() {
swiper.mousewheel.disable();
}
I have a (primary) slider (showing mostly images - one at a time) on the bottom of which is another slider of thumbnails. I am trying to make the thumbnails such that clicking on one automatically display that image on the primary slider. The jQuery I used to do that is as follows (jump to the last function):
$(document).ready(function(){
main_slider = $('.bxslider').bxSlider({
speed: 500,
adaptiveHeight: true,
video: true,
auto: true,
autoHover: true,
autoControls: true,
autoControlsCombine: true
});
thumb_slider = $('.thumbnailslider').bxSlider({
slideWidth: 40,
minSlides: 2,
maxSlides: 15,
slideMargin: 2
});
this_slider_index = $('.bxslider project_gallery_view gallery_project_display a.main_display').attr("href");
$('.thumbnailslider a.bx-clone').click( function(){
$('.thumbnailslider a.bx-clone').attr("href", this_slider_index)
});
});
What I'm doing here is making an on-click function for each thumbnail of the thumbnail class. I then set the href attribute of each to the index of each image in the primary slider. However, my sliders act as if this function doesn't exist, which means that I'm clearly missing something. I've tried searching for solutions for hours, but cannot figure out what I did wrong here.
(Disclaimer: I'm not very familiar with jQuery either, so please forgive me if it's something obvious.)
This problem is plaguing me. I've used jCarouselLite for years and years, I even added a "fade" feature to the original library released by Ganeshji Marwaha for my own use. I recently switched to the new plug-in because it is still supported, it uses touch events, and it can be responsive. But I have had no luck in using it.
I am almost certainly doing something stupid, but I can not figure out what... Can anyone take a look with fresh eyes at this homepage implementation?
http://staging.tbc1927.com/www/
The implementation here is not responsive, but I would like swipe supported.
$().ready(function() {
$(".homecarousel").jCarouselLite({
visible: 1,
auto: 12000,
speed: 800,
responsive: false,
swipe: true,
circular: true,
btnNext: ".next",
btnPrev: ".previous"
});
});
The CSS is simple enough, and I am letting the plug in do the heavy lifting. The jQuery I am using is the same as they recommend (1.7.2), though I had been using a newer version as well with no luck (1.8).
When the carousel initially loads, the first slide is fine. Then it goes away, and the whole carousel is positioned WAY off the page. The longer the carousel runs, the more off the page it is positioned.
What am I missing?
The author of the plug in helped me out here. The plug in changed the "auto" option to a boolean value, and the "12000" value was throwing it off. To set the animation delay, the plug in now uses a parameter called "timeout". The correct implementation script should be:
$().ready(function() {
$(".homecarousel").jCarouselLite({
visible: 1,
auto: true,
timeout: 12000,
speed: 800,
responsive: false,
swipe: true,
circular: true,
btnNext: ".next",
btnPrev: ".previous"
});
});