Build Your Own Controls for Elementor Carousels (No Plugins!) скачать в хорошем качестве

Build Your Own Controls for Elementor Carousels (No Plugins!)

UPDATE: as of v3.11, Elementor has introduced the 'Upgrade Swiper Library' experiment, which updates the underlying Swiper infrastructure from v5.3.6 to v8.4.5. With this upgrade comes a change to one of the class names used in this video - 'swiper-container' is now just called 'swiper'. If you are having trouble getting our code to work, and you are using Elementor v3.11+ with the 'Upgrade Swiper Library' experiment enabled, try changing line 3 of the JavaScript from: var swiperTarget = $('#my-elementor-carousel .swiper-container'); ... to ... var swiperTarget = $('#my-elementor-carousel .swiper'); ... and this should hopefully fix the problem. ========================================== Have you ever wanted to create your own controls for Elementor's carousels? Perhaps you want to use your own icons or buttons to move between slides in your carousel? Or perhaps you want to place them somewhere else on your page, rather than being stuck to the sides of the carousel? In this tutorial we'll show you how to use any widgets or elements as control buttons for any of Elementor's carousels, and place them wherever you want on your page. And best of all, there are no plugins used! In this video, we will: Create a page containing a testimonial carousel. Add our own custom content to the carousel using Elementor templates. Build a separate section containing icons that we will use as buttons. Write some JavaScript/jQuery to make the icons control the carousel. Add some CSS to style the icons like buttons, so the pointer appears when we hover over them. Read more about 'Swiper', the JavaScript slider component that is used by Elementor's carousels: https://swiperjs.com Here is the CSS and JavaScript/jQuery used in the tutorial... CSS (don't forget to add 'style' tags around the following CSS): #my-prev-element:hover, #my-next-element:hover { cursor: pointer; } JavaScript/jQuery (don't forget to add 'script' tags around the following code): jQuery(document).ready(function($) { function getSwiperInstance() { var swiperTarget = $('#my-elementor-carousel .swiper-container'); return swiperTarget.data('swiper'); } $('#my-prev-element').on('click', function() { getSwiperInstance().slidePrev(500, true); }); $('#my-next-element').on('click', function() { getSwiperInstance().slideNext(500, true); }); }); Questions? Comments? Please reach out! Don't have Elementor Pro? It's crazy cheap for the value. Get Elementor Pro (we may get a small kickback for teaching and referring): https://bit.ly/elementor-kg