why Swiper JS inital loading shows a single slider? - javascript

I am trying to use the swiper js library : https://idangero.us/swiper/get-started/
It works fine but I have problem with initial loading ..its a carousel with multiple multiple carousel items. But when I load the carousel it loads the first slider item first, which covers the entire screen. Then it starts loading the other carousel items. I am using it in elementor, WordPress
I tried using below code as documented. I am using Jquery
https://github.com/nolimits4web/Swiper/blob/master/demos/150-freemode.html
What could I be possibly doing wrong for this case?
update:
i found that setting max-width for the swiper-wraper can fix the issue..any way to set that based on colomn count?

Related

wanted to implement s horizontal scroll like netflix in reactjs using react-bootstrap

I want to have a horizontal scroll-like Netflix in the react js with an arrow on both ends one scrolling previous items and one scrolling next items. But the movies will be dynamic means they are coming from a database. and their number is not fixed. I tried various ways like using section but as the data is dynamic so I don't know how to fix it.
You can checkout react-slick plugin to handle your case. It has a dynamic slides feature where you can add more slides as per your case.
Also, has actions on moving slide which you can use when to fetch the new set of slides from your database.
Ref: https://react-slick.neostack.com/docs/example/dynamic-slides

jQuery ResponsiveSlides - How to start Slider with last picture in <ul>

I am currently using responsiveSlides
as an image slider on our web page.
It is a jQuery slider using an HTML unsorted list of images to slide through (automatically in my case).
Now the Issue i am having is, that before the slider actually starts (meaning the script is loaded) there is the last picture in the unsorted list displayed, for a short moment. Then the slider starts his work with the first image in that list.
I tried using a minified version of the js-file, and load that script at the very beginning of my HTML markup. This actually shortened the display time of the last picture, but it is still noticeable and annoying. (This happens with every click on a navigation point, as the page is loading new...)
Also i experimented with timeout function (js) to display the unsorted list containing div after some miliseconds, or on document.ready state, etc..
But all of theses attempts where ugly.
So now i am at the point, where i try to understand how the whole slider script is working, and i assume there must be a point, where i can set to start with the last picture in my unsorted list, instead of starting with the first one, but i just can't find that point in the code.
I couldn't manage to post the code here with proper syntax highlighting, so you can find the code here
Any ideas are much appreciated!
As I see on their demo page, sliding happens because of changing z-index, so slides like a pie.
In you slider you may see the last slide while script is initializing because of already applied CSS, but not JS yet.
I'd suggest to add opacity: 0; in CSS to all your slides. When JS will be ready, it'll add opacity: 1; itself.

Slick.js is breaking Foundation clearing lightbox

I'm having trouble getting Slick.js and the Foundation clearing lightbox to play nicely together. The way I have my site set up is that there are three 'pages', but each page is a Slick.js slide, so the site is really only one actual webpage.
In my photography 'slide', I have a basic lightbox setup with Foundation. However, I cannot get the lightbox to open properly when Slick.js is enabled. It works just fine when Slick.js is disabled.
You can see a live example here: www.kcfeatures.com/services.html
Here's a working live example (slick.js is disabled): www.kcfeatures.com/services1.html
For the life of me, I cannot figure out how to get it to work. My guess is that it has to do with the slick-track? Since the slick-track div is so wide it might be messing with how the lightbox is displayed. Lightbox also normally starts at the very top of the viewport, but with slick.js enabled it starts underneath the topbar, where the slider starts.
Any help or guidance would be greatly appreciated!
Even I tried to implement something similar but slick didn't allow my clearing lightbox to work.
Suggestions/Workarounds
Try Foundation 5 Reveal modal.
Have separate divisions for every thumbnail image that would contain the large version of the image. Tweak your code to trigger the reveal modal for every thumbnail displaying the larger version. However this will not allow you to move through other images as clearing lightbox would do. (You can implement a slick slider inside your reveal modal div to make that happen.)
How about using Foundation Tabs ?
I saw your website, except for the slide in effect of photography, videography and web design divs there is no need specific need for slick usage. I believe you can use Foundation Tabs and implement the same (Using clearing lightbox will be super easy now). If you want animation for your tabs you can refer Jquery Slide animations and implement the same for your tabs. You can also refer Foundation Tabs animation using this.

Flexslider DirectionNav Doesn't Behave Like Example

I hope I'm not violating any written or unwritten rules by asking for help on my business' site.
http://www.gnarlyweb.com/wrladv/
So I'm using Flexslider (but have tried at least 3 others) to handle showing multiple pieces of work on portfolio items. If you scroll to the Portfolio section, each item is clickable, and a flexslider appears. The Flexslider js is obviously working because the nav shows up, the images will animate if I have slideshow: true, but the arrows on the side do not make it move to the next piece.
I've been working on this for weeks now and can't figure it out. Does anyone know why only half of the Flexslider library works in this situation?
I know it's not Flexslider's fault, because I can put together a jsfiddle with the sources from the portfolio area and have it work perfectly.
I see all your images are in one flexslider container and they are dynamic.
I think this may cause this problem.
But i'm not pretty sure.
My suggestion is: different flexsliders for different images
You're not giving anything for the flexslider script to reference in your html. Looks like your basic html setup for your flexslider is:
<div class="portfolio-slides">
<ul class="slides">
<li><li>
</ul>
</div>
By default, the flexslider script searches for the flexslider class. You can either go into your flexslider script and add,
$(document).ready()
$(window).load(function() {
$('.portfolio-slides').flexslider({
});
});
or change your div class name to flexslider. The issue you're going to run into is that you have multiple flexsliders so you're going to have to create unique tags and have jquery call on each one otherwise all the flexsliders sync up.

Multiple JSliderNews Sliders

Did anyone got the chance to get multiple JSliderNews instances working on one page?
I'm using different selectors for the two sliders - still the behaviour is:
Both sliders are rendering fine, no JavaScript errors, everything seems fine.
But using the navigation items only will move the slides on the second slider. Using the navigation on the second slider will only move the second slider - so first slider is dead, except it controls the second one.
I can't figure out why I can't have two instances of the same plugin on one page...
JQuery plugin: http://www.landofcoder.com/demo/jquery/lofslidernews/
I'm using JQuery 1.7.0

Categories

Resources