Many people on their own site want to see sliders - these are blocks that display one element of content on the screen, and after a certain period of time they change this content to another. Naturally, each web developer is able to independently create a slider using HTML, CSS and JavaScript, but this is far from always the point. You will spend quite a lot of time, despite the fact that there are quite a few ready-made solutions on the Internet that make your life much easier and make your site much more attractive. This article will focus on one of these solutions called Owl Carousel. Setting up this slider is incredibly simple, so even a beginner can handle it. Now you will find out what this slider is, as well as other important details. Owl Carousel is set up step by step, so you should study this material in order only.
What is it and why is it worth choosing this particular slider?
Owl Carousel, the configuration of which will be discussed in this article, is a very effective plugin that adds a beautiful and convenient slider to your page, which will greatly facilitate your work on the site, saving you a lot of time, effort and money. What are the advantages of this particular plugin, because there are quite a lot of sliders on the Web? The fact is that this slider offers you several dozens of customization options, which will allow you to make your page unique and inimitable. This is an adaptive plugin that will work on all versions of browsers, and it can also be easily connected with WordPress and other popular CMS. In general, this slider has a lot of advantages, so you should definitely make a choice in its favor. However, before you start setting up Owl Carousel, this plugin still needs to be downloaded.
Download
Setting up Owl Carousel 2 is not possible if you have not downloaded it to your computer, and since this is a step-by-step instruction, itโs worth starting from the very beginning. So, the program can be downloaded using the package managers, however, these are advanced developer tools, so it will explain how to get this plugin in a standard way. You need to go to the plugin's official website and download the latest version. After that, all downloaded files need to be transferred to the directory of your site, having prepared a convenient folder, which is called the same as the plugin itself. Please note that this plugin is associated with jQuery, so you also need to have this library available. Well, when you download this plugin, you will need to do the next step, namely, setting up the Owl Carousel 2 slider.
CSS
In Owl Carousel 1.3, the settings remain almost the same as in the newer second version, only new features are added. However, the basic information will be the same starting with adding CSS to your document. So, the first step is to add the line <link rel = "stylesheet" href = "owlcarousel / owl.carousel.min.css"> to the HTML code. What does she give you? This is the line that uploads the necessary styles to the site to display the slider. You can end this by doing visual processing yourself. However, there is a more convenient and quick solution. You can also add the line <link rel = "stylesheet" href = "owlcarousel / owl.theme.default.min.css"> , which also loads the standard slider theme, which makes it instantly ready to use. You can edit some styles, making your slider more unique and unusual, as well as more suitable for your content. Naturally, the Owl Carousel settings in Russian would be very convenient, but every person who creates sites should understand that he canโt do without knowledge of English.
JavaSpript connection
Naturally, the slider will not work without JS, so you also need to take care to include the appropriate file containing the necessary code. To do this, you need to insert a line of code from the documentation, however, under one condition. Everyone knows that JS is a programming language that executes all commands in order, respectively, in this case, you should add this line of code after the line that adds the jQuery library to your document. You donโt need to do anything more with JS in the case of this slider.
HTML code layout
Well, you have connected the slider, now it's time to design and configure it. First of all, you need to write HTML code to make the slider appear on your page. To do this, you need to create a container that will contain slides. This can be done using the div tag, which needs to be assigned the owl-carousel class. It is this class that ensures that all styles that belong to the slider are activated. You can also register another class - owl-theme. It will be useful to you if you decide to use the default design or if you took the standard version of the slider as the basis for further work.
Then you need to add each slide in a separate container with a div tag. Naturally, you can use other tags, but this tag is best suited in the case of sliders.
Plugin call
Well, the last thing you need to do to make a ready-made slider appear on your site is to use this block of code:
$ (document) .ready (function () {
$ (". owl-carousel"). owlCarousel ();
});
It ensures that the slider starts to function, i.e. scrolls the content when your page loads. Using the same code, you can connect Owl Carousel to WordPress. The settings of this plugin are numerous and varied, and now you will learn about the most key points.
Setting the appearance and functionality of the slider
So, what commands can you use to customize your slider? First of all, you need to remember the items command, since with it you can set a specific number of slides in your slider. The loop command allows you to choose whether to loop the slider, or stop scrolling on the last item. There is also the Drag command, which has several options, for example, mouse and touch. In the first case, you can make it so that the elements of your slider can be flipped with the clamped mouse, and in the second case, by touching (this command is suitable for mobile devices). Another important command is nav, which enables the display of navigation arrows. Together with it you can use the navText command, adding captions to the navigation buttons. Also, you should not forget about the autoplay command, which allows you to turn on and off the automatic start of turning over the slides of your slider when the page loads. Along with this command, you can also use autoplayTimeout, for which you can set a specific value in milliseconds, which will determine the time between automatically scrolling through each of the slides.
If you use responsive web design, that is, the design of your page automatically changes depending on which device it is viewed on, then you definitely need to remember the responsive command, which allows you to set the number of displayed slides depending on the screen width on which page is being viewed.