Creating a two-level carousel using jquery. jQuery plugin "Smooth Div Scroll". Responsive jQuery content slider bxSlider
But since we are going over the basics of JS, to study the base I will describe how to create simple slider only with the help JavaScript language. Well, let's start analyzing the material!
What types of sliders are there and where might they be needed?Creating convenient galleries for viewing images is required on all web services that contain at least some photographs. These can be online stores, portfolio sites, news and educational services, websites of companies and entertainment establishments with photo reports, etc.
However, this is a standard use of sliders. Similar technologies also used to attract customers to promotional goods, services, or to describe the advantages of enterprises.
Mostly, customers ask to implement it on “Carousel” type galleries. This handy tool to view images in large size with the ability for the user to switch slides forward and backward. In this case, the pictures themselves usually switch automatically after a certain time. This mechanism was nicknamed due to the fact that the display of pictures is repeated in a circle.
Today, if you wish, you can find the most unusual and attractive plugins on the Internet for viewing a set of photos.
Independent activityWell, now let’s start creating our own slider. At this stage of learning, to implement it, I suggest you use pure . This will automatically switch pictures in a circle.
Below I have attached program code your application. I left comments for you as I coded.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
|
Automatic image switcher /*Describe appearance frame, the basis for the future slider */ #slides( position: relative; height: 415px; width: 100%; padding: 0px; list-style-type: none; box-shadow: 0 0 7px #010, 0 0 10px blue , 0 0 15px #010, 0 0 35px #010; ) /* I edit the display of pictures*/ img ( width: auto; height: 390px; padding: 13px; ) /* I indicate that the contents of the list items will be displayed in the center of the element- parent, i.e. V in this case in the center of the ul element - the basis for the slides */ li ( text-align: center; ) /* I describe the appearance of the slides themselves */ .slide( position: absolute; opacity: 0; top: 0px; left: 0px; height: 100 %; z-index: 3; width: 100%; background: blue; -moz-transition: opacity 1.5s; transition: opacity 1.5s; -webkit-transition: opacity 1.5s; ) /*When displayed, the object becomes visible and moves to the front*/ .showing( opacity: 1; z-index: 4; )
I hope you didn't have any problems with the css and html code. But I consider it necessary to disassemble the work of the script. So let's move on to deciphering what was written.
So, first, using the querySelectorAll method, I assign the MySlider variable a list of all elements within the specified range. Indicates this entry
document.querySelectorAll("#slides .slide")
Thus, MySlider stores a collection of four elements.
Next, I specify which image to start showing by setting the currentPicture variable to zero. Then I indicate that the slide change occurs in 2.7 seconds and the nextSlide processing function must be called.
Let's move on to the function itself.
Initially, for the current list element, I change the description of the classes, i.e. I rewrite “slide showing” to “slide”. Consequently, the image becomes invisible.
Now I define new element collection, which will be displayed on the screen. To do this I take the current position +1. You may have noticed that I also use division with a remainder (%) by the number of slides available. This trick with the ears is necessary in order to start the show in a new circle. This is what it would literally look like.
01/11/15 310.6KCurrently, a slider - carousel - is a functionality that is simply necessary to have on a business website, portfolio website or any other resource. Along with full-screen image sliders, horizontal carousel sliders fit well into any web design.
Sometimes the slider should occupy one third of the site page. Here the carousel slider is used with transition effects and adaptive layouts. Websites ecommerce use a carousel slider to display many photos in separate publications or pages. The slider code can be freely used and modified according to your needs.
Using JQuery in conjunction with HTML5 and CSS3, you can make your pages more interesting, provide them with unique effects, and draw the attention of visitors to a specific area of the site.
Slick – modern carousel slider pluginSlick is a freely available jquery plugin whose developers claim that their solution will satisfy all your slider requirements. Adaptive slider - carousel can work in “tile” mode for mobile devices, and in “drag and drop” mode for the desktop version.
Contains a “fade” transition effect, an interesting “center mode” feature, lazy loading of images with auto-scrolling. Updated functionality includes adding slides and a slide filter. All to ensure that you configure the plugin according to your requirements.
Demo mode | Download
Owl Carousel 2.0 – jQuery – plugin for use on touch devicesThis plugin has the following features: big set features suitable for both beginners and experienced developers. This updated version slider - carousel. His predecessor had the same name.
The slider has some built-in plugins to improve the overall functionality. Animation, video playback, slider autoplay, lazy loading, automatic height adjustment - the main features of Owl Carousel 2.0.
Drag and drop support enabled for more convenient use plugin on mobile devices.
The plugin is perfect for displaying large images even on small screens of mobile devices.
Examples | Download
A fairly small, but functionally rich jquery plugin that allows you to place a slider on a page - a carousel, which has a small core and does not consume a lot of site resources. The plugin can be used to display vertical and horizontal sliders, with animation and create sets of images from the gallery.
Examples | Download
Ultra compact jQuery slider - carousel, the functionality of which is much greater than that of a regular slider. These include single image preview, multiple image carousel display, and title-based slider display.
Examples | Download
Owl carousel – slider with support touch screens and drag and drop technologies, easily integrated into HTML code. The plugin is one of best sliders, which allow you to create beautiful carousels without any specially prepared markup.
Examples | Download
Uses 3D transitions based on CSS styles and a little Javascript code.
Examples | Download
Magnificent 3D carousel. It looks like this is still a beta version, because I discovered a couple of problems with it just now. If you are interested in testing and creating your own sliders– this carousel will be a great help.
Examples | Download
Responsive slider - carousel using bootstrap technology just for your new website.
Examples | Download
Most popular on portfolio and business websites. This type of slider - carousel - is often found on sites of any type.
Examples | Download
This tiny sized slider is ready to work on devices with any screen resolution. The slider can work in both circular and carousel modes. Tiny circle is presented as an alternative to other sliders of this type. There is built-in support for operating systems iOS systems and Android.
In circular mode, the slider looks quite interesting. Excellent support for the drag and drop method and an automatic slide scrolling system.
Examples | Download
A powerful, adaptive, carousel slider is perfect for a modern website. Works correctly on any device. Has horizontal and vertical modes. Its size is minimized to just 1 KB. The ultra compact plugin also has excellent smooth transitions.
Examples | Download
Contains more than 50 effects, which can help you create an original slider for your website.
Examples | Download
Resize your browser window to see how the slider adapts. Bxslider comes with more than 50 customization options and showcases its features with various transition effects.
Examples | Download
jCarousel is a jQuery plugin that will help organize the viewing of your images. You can easily create custom image carousels from the base shown in the example. The slider is adaptive and optimized for working on mobile platforms.
Examples | Download
Scrollbox is a compact plugin for creating a slider - a carousel or a text crawl. Key features include vertical and horizontal scroll with a pause when hovering the mouse cursor.
Examples | Download
A simple carousel slider. If you need a fast plugin, this one is 100% suitable. Comes with only the basic features required for the slider to work.
Examples | Download
The creators of Flexisel took inspiration from the old-school jCarousel plugin, making a copy of it aimed at correct operation slider on mobile and tablet devices.
Flexisel's responsive layout, when running on mobile devices, is different from a browser-window-sized layout. Flexisel is perfectly adapted to work on screens, both low and high resolution.
Examples | Download
Elastislide adapts perfectly to the size of your device's screen. You can set the minimum number of images to display at a specific resolution. Works well as a carousel slider with image galleries, using a fixed wrapper along with a vertical scrolling effect.
Example | Download
Freeware slider from Woothemes. It is rightfully considered one of the best adaptive sliders. The plugin contains several templates and will be useful for both novice users and experts.
Example | Download
Amazing Carousel – responsive image slider using jQuery. Supports many content management systems such as WordPress, Drupal and Joomla. Also supports Android and IOS and desktop operating systems without any compatibility issues. Built-in amazing carousel templates allow you to use the slider in vertical, horizontal and circular modes.
One day my friends decided to give me a pleasant surprise. The surprise itself was very simple; it required a very ordinary T-shirt without any designs.
And then they ran into a problem - all the T-shirts in the stores had images on them. They couldn't find the simplest T-shirt without any pictures. I think you have encountered a similar problem when you cannot find the simplest thing.
And it’s the same story with carousels; almost all carousels already have a design. And you almost always need a clean carousel, which you can then design as the designer intended.
Therefore, in order to immediately enjoy working with carousels, and to make them quickly, I suggest you use the following plugin.
jQuery plugin for a clean and powerful carouselThe cool thing about this plugin is that it has no design and is much easier to work with than other beautiful plugins.
It can be decorated in any way you like.
And so, here is this plugin: Owl Carousel.
Installing the plugin1. Connect jQuery if it is not already connected, for example like this
2. Copy the plugin files to the site folder
- Unpacking
- Copy the owl-carousel folder to the site
3. Connect these files to the site:
4. Add code to the page
1 2 3 4 5 6 7 8 9 10 11 12 13 14
5. Launch the plugin
$(document).ready(function())( // Find the carousel block var carousel = $("#carousel"); // Launch the carousel plugin carousel.owlCarousel(); ));
6. We arrange
/* Main block */ .owl-wrapper-outer ( border: 1px solid #777; border-radius: 5px; overflow: hidden; background: white; ) /* 1 carousel square */ .carousel-element ( padding: 30px ; text-align: center; font-size: 300%; border-right: 1px solid #777; )
Back and Forward buttonsIn this example, I will show not the fastest, but the most universal method.
1. Add the buttons themselves
Back forward
2. Attaching buttons to the carousel plugin
After launching the plugin, add the code
// Back // When you click on "Back" $("#js-prev").click(function () ( // Start rewinding left carousel.trigger("owl.prev"); return false; )); // Forward // When you click on "Forward" $("#js-next").click(function () ( // Start rewinding to the right carousel.trigger("owl.next"); return false; ));
Now, when you click on “Back” and “Forward”, rewind will be triggered.
MarkersThese are the points that show where we are now.
They can be enabled when running the plugin by adding the following parameter
// Launch the carousel plugin carousel.owlCarousel(( // Points under the carousel pagination: true ));
/* Block with dots */ .owl-pagination ( text-align: center; /* Align the dots in the middle */ ) /* 1 Point */ .owl-page ( width: 10px; height: 10px; border: 1px solid #777; display: inline-block; background: white; margin: 10px; border-radius: 5px; ) /* Active point */ .owl-page.active ( background: #777; )
To show only 1 blockThis is quite often needed, for this we add the following parameter
// Launch the carousel plugin carousel.owlCarousel(( singleItem: true, // Show only 1 block at full width ));
Different number of blocks on different devicesA very useful feature that allows you to create an adaptive carousel for mobile devices.
// Launch the carousel plugin carousel.owlCarousel(( // Number of displayed blocks // depending on the device (screen width) // Number of blocks per big screens items: 10, // 5 blocks on computers (screen from 1400px to 901px) itemsDesktop: , // 3 blocks on small computers (screen from 900px to 601px) itemsDesktopSmall: , // 2 elements on tablets (screen from 600 to 480 pixels ) itemsTablet: , // Settings for the phone are disabled, in this case // the tablet settings will be used itemsMobile: false ));
What kind of surprise is that?Friends come to my birthday party, they smile joyfully, the delight is overflowing. They solemnly present me with a gift.
I open it and look at the T-shirt. I'm unfolding it. Damn, what stupidity. I see 3 photos of myself on this T-shirt. I put on a T-shirt and everyone starts laughing, it turned out stupid and funny.
Sometimes I have to solve problems related to the frontend, despite the fact that I don’t like it :)
As a matter of fact, you could estimate my attitude towards everything related to “beautiful” from the design of this site, which was developed by me alone :)
However, relatively recently I was faced with the need to implement a slider in JavaScript, and this had to be done without any ready-made libraries and even without everyone’s favorite jQuery.
This need was caused by the fact that the result should have been a JS script, which, through third party service I would connect to the site. Consequently, ready-made carousels in JavaScript were no longer needed, because To integrate them, it was necessary to add a library connection to the site’s HTML code via a script tag and copy the files themselves either to the server or pull them via cdn, but this would again require editing the resource code.
How to make a JavaScript slider: the beginningToday, I think that everyone who found themselves in a similar situation began by searching for existing developments, because... when the task of making a JS carousel is within the scope of work, it should always be done as quickly as possible. And under such conditions, no one will allow you to sit and invent your own bicycles.
Customers always don’t care about how the code is written, what its architecture is, the main thing is to see the result!
As a result, as you understand, before writing a slider in JavaScript without jQuery, I decided to find a ready-made one and modify it to suit my needs. Why no jQuery? Yes, because on the target resource, where I planned to connect my slider through the service, the jQuery call in the code was located later than the script connected by the service. Therefore, jQuery constructs in my code were simply not perceived.
As a basis, I took this JavaScript image slider - https://codepen.io/gabrieleromanato/pen/pIfoD.
I decided to stop there, because... its JS code was written using OOP principles and its classes are based on prototypes, not on banal functions.
To be honest, I deeply do not understand and do not recognize the current hype around JavaScript using OOP, frameworks and other architectural things in a language that was originally intended to be a simple dynamic scripting language. Just like JS itself, I frankly dislike it with its syntactic vinaigrette, which allows the same constructions to be written in several ways.
But, unfortunately, in modern world Few people share my positions, because... this language is developing at a crazy pace and is even making attempts to win the minds of backend developers using Node.js as an alternative to Java, PHP, C#, Ruby and other monsters.
As a result, in order not to simply be left without work, you have to quietly figure out JavaScript. And in the pure JavaScript slider implementation I chose, I encountered something that, as you understand, I despise in given language. That’s why I chose it, so that there would be at least some reason to work and understand JavaScript OOP and prototype classes - otherwise I would never have voluntarily touched them in my life :)
Based on the code I found, I needed to develop a slider in pure JS in a pop-up window (this thing is also called a popup, popup, etc.), which would have buttons for switching slides and clickable indicators of the current slide. It was also necessary to make a button to close this window.
This is what I ended up with.
Making a slider JS libraryFirst, I decided to implement everything wisely and make a JavaScript slider for the site in the form of a library that can be connected to the site with a single script, in which the slider components, divided into subdirectories, will be called. I decided to call it popupSlider.js in honor of its original purpose.
Its code can be found on GitHub at this address - https://github.com/Pashaster12/popupSlider.js
The library structure is as follows:
The slides folder is for slide images. Controls contains pictures of JS carousel controls (buttons for closing the slider and switching slides). And in assets there are static elements of the JS slider: HTML markup and a file with CSS styles.
Well, the popupSlider.js file is the heart of the library itself, in which the JavaScript actions of the carousel are written and a connection is established with other files. It is this one that we will connect on the site, and it will call the others.
I decided to start with the HTML markup of our JS image carousel, which in my case looks like this:
Text 1 
Text 2 
Text 3
To design the slider in JavaScript as a popup, I used the following styles:
#slider ( margin: auto; width: 600px !important; overflow: hidden; ) #slider-wrapper ( width: 9999px; height: 343px; position: relative; transition: left 400ms linear; ) .slide ( float: left; width : 600px; position: relative; overflow: hidden; ) .caption ( width: 600px; height: 110px; line-height: 1.5; font-size: 15px; font-weight: 300; text-align: center; color: # 000; display:table; ) .caption-container ( display: table-cell; vertical-align: middle; padding: 0 20px; ) #slider-nav ( position: absolute; bottom: -36px; text-align: center; left: 50%; transform: translateX(-50%); ) #slider-nav a ( width: 8px; height: 8px; text-decoration: none; color: #000; display: inline-block; border-radius: 50%; margin: 0 5px; background-color: #fafafa; ) #slider-nav a.current ( background-color: #337ab7; ) .horizontal-controls ( position: absolute; display: inline-block; width: 12px ; height: 20px; top: 50%; margin-top: -10px; ) #prev ( background: url(../controls/arrow_left_inactive.png); left: -40px; ) #prev:hover ( background: url(../controls/arrow_left_active.png); ) #next ( background: url(../controls/arrow_right_inactive.png); right: -40px; ) #next:hover ( background : url(../controls/arrow_right_active.png); ) #cq-popup ( width: 600px; z-index: 23; left: calc(50%); top: calc(50%); position: fixed !important ; background-repeat: no-repeat; background-position: right; background-color: #fff; font-family: "Roboto","Segoe UI","Helvetica","Georgia","Calibri","Verdana" ; transform: translate(-50%, -50%) scale(1); ) #cq-popup .header ( display: inline-block; font-size: 17px; font-weight: 500; ) #cq-popup > div ( width: 500px; font-size: 22px; line-height: 36px; ) #cq-popup-btclose ( text-decoration: none; position: absolute; right: -40px; top: 0; background: url(. ./controls/btn_delete_inactive.png); height: 16px; width: 16px; ) #cq-popup-btclose:hover ( background: url(../controls/btn_delete_active.png); ) #cq-popup-bg ( position : fixed; top:0; width: 100%; height: 100%; background: rgba(51,51,51,0.8); z-index: 22; )
As a result of applying these JS styles, the carousel looks like this:
And HTML markup, and CSS styles I brought in separate files popupSlider.html and popupSlider.css, which are located in the assets directory of the JavaScript slider library. I did this on purpose so that when using this code, users could easily adjust the markup and design without messing around in the JS code, where what would have to be written out would have to be written directly.
In addition, many people still like to minimize JS to speed up site loading. So customize this decision under these conditions it would be very difficult.
As a result, I decided to simply include ready-made files in the main library file popupSlider.js, which for my task took the following form:
Function Slider(element) ( this.loadStatic(); this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function () ( this.links = this.el.querySelectorAll ("#slider-nav a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.nextBtn = this.el.querySelector("#next"); this.prevBtn = this. el.querySelector("#prev"); this.navigate(); ), navigate: function () ( var self = this; for (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index >1) this.prevBtn.style.display = "block"; else if (index == 1) this.prevBtn.style.display = "none"; ), setCurrentLink: function (link) ( var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; this.currentElement = link; for (var j = 0; j< a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };
A few comments about the above code. The contents of the popupSlider.js file is a single JavaScript Slider class, which, like in PHP, contains a constructor and class methods. Only in JS, the definition of a constructor, unlike PHP, is mandatory.
The constructor is defined using the following construct:
Function Slider(element) ( //constructor code)
Inside the constructor, the actions that will be performed when creating a class object must be specified.
The class methods themselves will be located inside the prototype and will be available to all instances of this JavaScript class. The JS prototype in my case is described by the following design:
Slider.prototype = ( //methods )
They will be called outside the class body as follows:
Var slider = new Slider(); slider.class_method();
And inside the class code itself, the following method is available:
This.class_method();
The main thing is not to forget that in JavaScript the value of this depends on the context of the call, so in the bodies of some methods in which it was necessary to call methods and properties of a class, there is such a construction:
Var self = this; self.class_method(); //to access a method that is one level higher than the code of the described method
It seems like I talked about all the nuances of writing code. Now a few words about the methods of our JavaScript class, which contain descriptions of the JS actions of the image carousel.
loadStatic()
The very first method called when creating an instance of a class in the constructor. Responsible for adding slider markup and a file with styles to the HTML code of the website page.
First, a new link tag is created in memory using JavaScript functions document.createElement() and it is assigned the values of all the necessary attributes, including the path to the CSS file with the JS slider styles. And finally, it is added to HTML pages s using JavaScript method appendChild() to the end of the head section, where the styles should be.
Next, we do the same for the file with the HTML markup of our slider in pure JavaScript. There’s just a small nuance here: you can’t just include an HTML file inside the same one, as we did with a CSS file. There are special libraries for this, for example, in order to include HTML in HTML, the lib from w3.org is excellent - https://www.w3schools.com/howto/howto_html_include.asp
But then it would have to either be included in the slider library itself, or ask users to install it themselves. But all this is suboptimal, because... requires a lot of body movements and slows down the site loading speed due to additional scripts.
As a result, I decided to receive the content HTML file inside JavaScript code and load it into a new one div element, created in memory as I did earlier for CSS connections file in JavaScript. The generated element is included at the very end of the body section of the HTML code of the site page.
If you want to insert a div with slider markup not just at the end of the body, but in a specific container, you can use the following code instead:
Var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div);
Enter the following, specifying the desired identifier of the target container (in my case, the HTML JS slider will be located in the element with id popupSlider):
Var target = document.querySelector("#popupSlider"); target.innerHTML = sliderHTML;
The method, which is called in the constructor after loadStatic(), is needed to initialize the class properties corresponding to the main HTML elements that we will access in the following code.
At the end, the navigate() method is called.
navigate()
In this method, the actions that occur when you click on the slide switch buttons and navigation elements located under the slider itself are indicated in the form of circles.
For convenience, I moved the JavaScript code for changing slides into a separate slide() method, but in this one I just attach it to the click event for each round button in the loop.
When you click on the “previous slide” / “next slide” buttons, as you can see, I decided to just emulate a click on the corresponding circle, defining the desired one relative to the current one, which has a CSS class current.
slide(element)
The method “responsible for the magic” of the JavaScript carousel itself, which contains the code that changes the positions of the slides. At the very beginning, the setCurrentLink() method is called, which we will talk about a little later.
The JS slider navigation button object in the form of a circle is passed to it as an input parameter.
The slide switch itself works like this:
At the end of the method, the behavior for the “previous slide”/”next slide” buttons, designed as left/right arrows, respectively, is described. If the current slide is the first of the entire list, then the button to go to the previous slide is hidden. If the latter, then remove the button to move to the next slide.
setCurrentLink(link)
This method of our class JavaScript slider is responsible for highlighting the navigation round button corresponding to the current element. Those. if we have the second slide selected, the second button will be highlighted.
The object of the button that should be selected as the current one is passed as an input parameter to the function.
The logic for highlighting the current element is simple:
The very last method of the class, which defines the action when clicking the close button of the slider in the form of a cross. Here, in fact, the code is the most understandable of all contained in the JS slider class.
When you click on the close button, which is accessed by its identifier, the slider element and the element that defines it are removed from the page. translucent background. They are also, in turn, obtained by unique identifiers.
The method itself is called inside the previously described navigate(), which contains all the scenarios of actions taking place on our JavaScript slider.
By the way, if you want to close the slider when you click outside of it, then just add the following code to this method:
Document.getElementById("cq-popup-bg").onclick = function () ( document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove() ;
JavaScript slide show based on the developed librarySometimes in practice you may need to make a JS scrolling carousel, which is often called a slide show. In my case this was not required, but I still decided to make one based on the final library code for a case where it might be useful.
In fact, the JavaScript implementation of a slide show differs quite slightly from a regular slider. The only difference is that in a slide show, the slides switch automatically at a given time interval, while in the case of a regular JS carousel they change manually using navigation elements.
SlideShow: function (timeout) ( var sliderCount = this.links.length; var self = this; this.slideCycle = setInterval(function () ( var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute ("data-slide"); var slideId = parseInt(currentSlideNumber, 10) + 1; self.slide(document.querySelector("")); ), timeout); )
I think it’s clear what’s happening here. For creating this method I copied the code from the click event on the manual slide buttons and placed it inside a JavaScript call to the setInterval() function, which performs a specified action after a specified period of time.
The action script is passed as the first argument as an anonymous function, and the time interval is passed as the second, which I decided to make as a variable whose value is passed when slideShow() is called.
The only modification to the code inside setInterval() that was required was to determine the number of slides and compare the index of the current slide with it to cycle the automatic switching.
Well, in order for this code to work, the method itself must be called. I decided to do all this in the same navigate(), which is precisely a collection of all sorts of scripts. I placed the call at the very end, passing as an argument the value of the time interval for automatic change slides in our JS slideshow (I chose 2000 milliseconds or 2 seconds, you can change this number as necessary):
Self.slideShow(2000);
After that check JavaScript work slider, without forgetting to clean your browser.
In theory, everything should work. If not, study the errors in the browser console and share them in the comments.
As a result, we got a JS slide show in which the slides switch automatically and in a circle, i.e. when the last slide is reached the show switches to new cycle, and the display starts again from the very first element.
When working with various JS libraries for image carousels and reviews, I noticed that developers actively use this practice, but with some addition. In all the solutions I have seen, the automatic slide show is interrupted if the user has done manual switching. So I decided to do the same in my library.
To interrupt automatic display JavaScript slides carousel, I decided to use the standard JS function clearInterval(), to which I pass as an argument the identifier of the time interval returned by the setInterval() function when it is set.
As a result, I got the following code, which I decided not to write as a separate method:
ClearInterval(self.slideCycle);
And placed it in places where the actions are described when clicking on various navigation elements, i.e. in the following:
Link.addEventListener("click", function (e) (...)); self.prevBtn.addEventListener("click", function (e) (...)); self.nextBtn.addEventListener("click", function (e) (...));
It is better to call clearInterval() closer to the click event itself, the main thing is before it, and not after it.
Integration of JavaScript slider on the siteSo, our slider in pure JS is ready. Now all that remains is to connect it to the site.
To do this, you need to follow the following steps sequentially, which are standard actions when integrating any third-party JavaScript libraries at all.
Step 1 . We copy the library files to our website in a separate directory.
Step 2. Add the following code to the HTML of the pages where the slider will need to be displayed, placing it before the closing body tag:
Step 3. We place the following code for calling the JS carousel in any existing JavaScript file, which is included on the page after connecting the slider itself:
Var aSlider = new Slider("#slider");
As you can see, this code is essentially creating an object of the Slider class, which is contained in popupSlider.js. That is why it should be called only after connecting the class file itself to the page.
Adding new slides to a JavaScript carouselEverything is very simple here. Since our slides are taken from a separate directory of the slides library, when adding new pictures you will just need to drop them into it necessary files, having previously given them the same size as the others.
And then in the code of the file assets/popupSlider.html add new block into the container with id slider-wrapper :
Text
In principle, you can simply copy a similar existing one and change the path to the image file and the text of the signature (if it is needed at all).
You will also need to add a new navigation element in the form of a circle, because... At the moment, its automatic addition has not yet been implemented. To do this, you will need to add the following code to the container with the slider-nav id, writing it at the very end:
The value of the data-slide attribute must be greater than the largest value of the other elements. It is enough just to increase the maximum current by one.
Packing JS carousel into a single scriptThat's it, the JavaScript slider is ready and connected. I personally recommend using this option in practice, if you need it at all :)
To speed up its operation, by the way, you can further compress static components: CSS, HTML and JavaScript files. I didn’t do this and offer you minified code, because there are a lot of frontend build systems now: Gulp, Grunt, Webpack and others. And each of them has its own algorithms for compressing and connecting files.
In addition, minified results may work differently on different OSes. In general, there are many reasons.
And the source codes themselves, I think, are not so heavy that they need this procedure. But if you need them, then configure the minification yourself, taking into account your OS and collector.
As I wrote at the very beginning, in order to solve the task initially set for me, I needed to get a single JS file for the correct use of my slider through a third-party service on the site. For this reason, I, strictly speaking, did not use ready-made third-party libraries.
Then the option single script JavaScript carousel will come in handy for you, because... all content will be contained directly in it, including HTML/CSS code, which in the case of a library is stored in separate files.
The script in my case consists of two parts. The first part contained the contents of the popupSlider.js file, which I will not present a second time. Insert it yourself, removing the description of the loadStatic() method and its call from the class code, because we won't need them.
The second part of a single JavaScript slider script for the site is a handler for the DOMContentLoaded event, which occurs when the page content is loaded.
There we will add the carousel JS code to the HTML/CSS page and create an object of the Slider class, which is equivalent to activating the slider itself.
Schematically the code looks like this:
/* contents of popupSlider.js without describing the loadStatic() method and its call */ document.addEventListener("DOMContentLoaded", function())( var str = "\ \ /*css code*/ \ /* html code*/ "; var div = document.createElement("div"); div.innerHTML = str; document.body.appendChild(div); var aSlider = new Slider("#slider");
Since in my case the option of uploading files to the server was completely closed, I had to upload the image files of the JavaScript carousel controls to the cloud and instead of the paths to them in the HTML and CSS code, write the links generated during saving.
If you don’t have such difficulties, then you don’t have to change anything, but don’t forget to copy the slides and controls library directories to the server and specify the correct paths to them.
Custom JS slider - development prospectsTo be honest, I don’t plan to engage in targeted support and development of the solution I created :) At the moment, there are a bunch of similar sliders and a small cart, which, unlike mine, have their own history, are thoroughly tested and are supported by a large community of users and developers.
It’s somehow not interesting for me to start this whole journey from scratch alone and create another bike, and I don’t really have time for it. But, on the other hand, this JavaScript slider is an excellent opportunity to practice development by refactoring its code and implementing new interesting functions that may not yet exist.
So if you, like me, need code base for experiments and you have at least some extra free time— copy the code of the JavaScript slider I described or join the contributors on GitHub. The repository is open, and I provided a link to it at the beginning of the article.
If you want to improve your front-end skills on my creation, I can even give you a small list of edits and improvements that the code needs and which may be of interest to you in terms of their implementation:
The list of edits I have given is, of course, not final and can be supplemented. Write about your suggestions, thoughts and wishes in the comments below the article and share with your friends via social media to also involve them in development.
I ask you not to judge my code strictly, because, as I already said, I do not consider myself a Frontend specialist and am not. I am also open to all your comments on coding style and hope that I can learn something from you, and you from me, i.e. fulfill the main purpose of developing and supporting OpenSource products.
Join the project communities, subscribe to updates, and you can even help me financially using the form right under the article itself, if I was able to help you with something or you just like what I do :)
That's all I wanted to say! All the best! 🙂
P.S. : if you need a website or need to make changes to an existing one, but there is no time or desire for this, I can offer my services.
More than 5 years of experience in professional website development. Working with PHP, OpenCart, WordPress, Laravel, Yii, MySQL, PostgreSQL, JavaScript, React, Angular and other web development technologies.
Project development experience various levels: landing pages, corporate websites, online stores, CRM, portals. Including support and development of HighLoad projects. Send your applications by email [email protected].
1. jQuery carousel"clickCarousel"
Block with scrolling news announcements. Use the left/right arrows to scroll through blocks. In the archive there is a carousel in two styling: light and dark.
1. jQuery carousel, plugin “carouFredSel”
A neat, fresh image carousel in jQuery.
4. jQuery plugin: carousel “Elastislide”
Great content sliders in the form of an image carousel with using jQuery. The demo page describes how to attach this carousel to your site.
Plugin " Slider Kit", a lightweight carousel with various scrolling methods.
7. javascript carousel
Original navigation between image thumbnails. To view the effect on the right side of the demo page, click on the Up and Down buttons. This jQuery solution also provides a hover effect on the thumbnail and scrolling with the mouse wheel.
9. Easy carousel 10. Carousel made from “Easy Paginate” blocks
jQuery plugin "Easy Paginate". Each rectangular block represents a regular li list item, and if there are more than three items, then to view them all you need to use slider-like navigation (using the forward and back arrows and using the navigation buttons at the bottom).
11. Vertical Ticker rotator
Vertical rotator on jQuery: automatic scrolling of content on the page. Navigation buttons are provided, as well as the ability to stop the rotation and start it again. When you hover the mouse cursor, the movement stops. At the HTML markup level, scrolling blocks are represented by ordinary li list items.
12. javascript CSS scrolling area
javascript solution "TinyScroller" to create a scrolling area placed in a DIV container.
13. jQuery plugin “Smooth Div Scroll”
Plugin for implementing horizontal scrolling of content in a specific area. When you hover the mouse over the left or right edge of the area, scrolling begins.
Navigation between content slides can be done using arrows or by clicking on the thumbnail. At the bottom there is a “Show” button that allows you to hide/show thumbnails or Full description slide.
15. Content rotator “Circular Content Carousel”
A block with a scroller that appears when you hover the cursor. You can scroll content using either the scroll bar or the mouse wheel.
This jQuery solution was inspired by a similar effect on the Apple website. The developers of this corporation have always found interesting solutions that have inspired webmasters from all over the world. To demonstrate the plugin, select a category from the list.
19. Awesome Slider
The slider is generated automatically. Data with the product name, description, link and image address are taken from the slider.db.txt file. Technologies used: CSS, PHP, jQuery.
20. Rotating blocks using jQuery
To view the block rotation effect, click on one of the small rectangles on the demo page
A content scrolling plugin, for example, can be used to display the latest news or to display Twitter flyers on a website.
22. Dynamic block “Customer reviews”
Automatic rotation of block contents. Technologies used: PHP, XML, CSS, jQuery.
This plugin converts list items (ul li) into jQuery elements carousels.
26. javascript carousel “ImageFlow”
It's easy to scroll through images using the mouse wheel.
27. Scrolling content
A compact block with an announcement of the latest materials on the site or news. The left column displays a paginated list of short announcements of the latest news. When you select one of them, a more detailed description and a link to read are displayed in the right column full text publications. Implemented using jQuery.
Images with links are scrolled, when you hover the mouse, the scrolling stops and the navigation bar appears. When you hover the mouse over a picture, its name is also displayed between the control buttons. Looks very nice on the page
33. Scrolling content, Mootools plugin “Scrollbar”
Scrolling is done using both the scroll bar and the mouse wheel.
