Owl Carousel - jQuery plugin with touch support, which allows you to create a responsive (adaptive) slider (carousel). It is very comfortable, simple and adaptive plugin to create sliders, carousels, etc. In this article I will try to explain and show you how it works.
Installing the Owl Carousel Plugin First we need to download the archive with the plugin
Below I will show an example of installing a plugin in a DataLife Engine template.
After we have downloaded the archive, open it and distribute the files as follows: File owl.carousel.css and owl.transitions.cssput in a folderstyle so or css. File owl.carousel.jsput in js folder
Now we need to connect these files in order for them to work in our template. Opening the file main.tpl a before the line enter following lines:
folder css change to the one in which you are css styles! Then at the very bottom before the line
enter this line: That's it! We are done with the installation.
Now we need to insert and configure the slider itself. I will show with an example topnews those display popular news through our owl carousel.
The documentation page describes all options, demos, and how to use our Owl Carousel plugin. Follow the link and choose any slider you like. For ours topnews I chose the very first one with the name images. In the javascript tab, copy these lines: $(document).ready(function() ( $("#owl-demo").owlCarousel(( autoPlay: 3000, items: 4, itemsDesktop: , itemsDesktopSmall: )); )); and paste them into the file main.tpl before the line
Then in the CSS tab, copy the lines: #owl-demo .item( margin: 3px; ) #owl-demo .item img( display: block; width: 100%; height: auto; ) and include them in any css file or to file main.tpl before the line
but after the line
! Now we will parse our HTML code and connect to topnews. In file main.tpl insert the tag at the right place (topnews) which in turn outputs a list of popular news, appearance which can be configured in a file topenews.tpl, more on that below .
Our tag code should look like this:
(topnews)
Well, now we just need to set up the news itself. Opening the file topnews.tpl and at the very beginning we enter:
close the attribute at the very end
If you are using one of my Bootstrap templates, then you can use the following lines in the file as an option topnews.tpl:
(title limit="55")
(text limit="100")
Read
News will be displayed in this form
This plugin can be used almost anywhere, just like using the tag (custom category) They can also replace the standard DLE gallery, I will publish a separate article about this. Enjoy your health ;)
Regards admin. downloadAttention: The download limit has been reached. Come tomorrow =)
Currently, a carousel slider 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 needs to take up one third of the site page. Here the carousel slider is used with transition effects and with responsive layouts. E-commerce sites use a carousel slider to showcase multiple photos in separate posts or pages. The slider code is free to use and change according to your needs.
By using jQuery in conjunction with HTML5 and CSS3, you can make your pages more interesting with unique effects and draw visitors' attention to a specific area of the site.
Slick - modern carousel slider plugin
Slick is a free jQuery plugin whose developers claim that their solution will satisfy all your slider needs. Responsive slider - carousel can work in "tile" mode for mobile devices, and in "drag and drop" mode for the desktop version.
It contains a fade transition effect, an interesting feature "mode in the center", lazy loading of images with auto-scrolling. Updated functionality includes adding slides and a slide filter. Everything for you to customize the plugin according to your requirements.
Demo mode | Download
Owl Carousel 2.0 - jQuery plugin for touch devices
This plugin has a large set of features, suitable for both beginners and experienced developers. This is 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 adjustment heights are the main features of Owl Carousel 2.0.
Drag support and drop included for more convenient use of the plugin on mobile devices. The plugin is perfect for displaying large images even on small screens of mobile devices.
Examples | Download
jQuery Silver Track Plugin
A rather small but rich jquery plugin that allows you to place a carousel slider on the page, 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
AnoSlide - Ultra compact responsive jQuery slider
Ultra compact jQuery slider- a carousel, the functionality of which is much more than that of a conventional slider. It include preview single image, displaying multiple images in a carousel and slider based on titles.
Examples | Download
Owl Carousel - jquery slider - carousel
Owl carousel - slider with support touch screens and drag technology and drop , easily embedded in HTML code. The plugin is one of the best sliders that allow you to create beautiful carousels without any specially prepared markup.
Examples | Download
3D gallery - carousel
Uses 3D transitions based on CSS styles and some Javascript code.
Examples | Download
3D carousel using TweenMax.js and jQuery
Gorgeous 3D carousel. It looks like it's still a beta version, because I found a couple of problems with it just now. If you are interested in testing and creating your own sliders, this carousel will be of great help.
Examples | Download
Carousel using bootstrap
Responsive carousel slider using bootstrap technology just right for your new website.
Examples | Download
Bootstrap based slider - Moving Box carousel
Most sought after on portfolio and business websites. A similar type of slider - carousel is often found on sites of any type.
Examples | Download
Tiny Circleslider
This tiny size slider is ready to work on devices with any screen resolution. The slider can work both in circular and carousel mode. Tiny circle is presented as an alternative to other sliders of this type. Has built-in support operating systems IOS and Android.
In circular mode, the slider looks quite interesting. Support for the drag and drop method and the automatic slide scrolling system are well implemented.
Examples | Download
Thumbelina content slider
Powerful, adaptive, carousel-type slider is perfect for a modern site. Works correctly on any device. Has horizontal and vertical modes. Its size is minimized to just 1 KB. The ultra compact plug-in has excellent smooth transitions.
Examples | Download
wow slider carousel
Contains over 50 effects that can help you create an original slider for your site.
Examples | Download
Responsive jQuery content slider bxSlider
Resize the browser window to see how the slider adapts. Bxslider comes with over 50 customization options and showcases its features with various transition effects.
Examples | Download
jCarousel
jCarousel is a jQuery plugin that will help organize your image views. You will be able to easily create custom image carousels from the framework shown in the example. The slider is responsive and optimized for mobile platforms.
Examples | Download
ScrollBox - jQuery Plugin
Scrollbox is a compact plugin for creating a slider - carousel or text running line. Key features include a vertical and horizontal scrolling effect with a pause on mouse hover.
Examples | Download
dbpasCarousel
A simple carousel slider. If you need a fast plugin, this one is 100% suitable. Comes with only the basic features needed to make the slider work.
The creators of Flexisel took inspiration from the old-school jCarousel plugin, making a copy of it that is focused on the correct operation of the slider on mobile and tablet devices.
Flexisel's responsive layout, when running on mobile devices, differs from the browser window size-oriented layout. Flexisel is perfectly adapted to work on screens, both low and high resolution.
Examples | Download
Elastislide - Responsive Carousel Slider
Elastislide adapts perfectly to the screen size of the device. You can set the minimum number of images to display at a certain resolution. Works well as a carousel slider with image galleries using a fixed wrapper along with a vertical scrolling effect.
Example | Download
Flex Slider 2
Freeware slider from Woothemes. It is rightfully considered one of the best responsive sliders. The plugin contains several templates and will be useful for both novice users and experts.
Example | Download
Amazing Carousel
Amazing Carousel - adaptive slider jQuery images. Supports many content management systems such as WordPress, Drupal and Joomla. It also supports Android and IOS and desktop versions of operating systems without any compatibility issues. Built-in amazing carousel templates allow you to use the slider in vertical, horizontal and circular modes.
Examples | Download
/* This is where our carousel begins. The.carousel-wrapper is relatively positioned, the.carousel-item is absolute. . */ .carousel-wrapper( position:relative; /* Absolutely positioned boxes get their height and width from the parent. We made them transparent by default, and then they will fade in when clicking on .arrow-prev and.arrow-next links. * / .carousel-item( position:absolute; top:0; bottom:0; left:0; right:0; padding:25px50px; opacity:0; transition:all0.5sease-in-out; /* Notice the padding on the left and 50px to the right? This way we can position our links! Each will be 50px wide. Also, I use empty links with background pattern so that the links look like arrows. Check if you have changed Link URLs with the original URL so your links aren't just transparent rectangles. */ .arrow( position:absolute; top:0; display:block; width:50px; height:100%; -webkit-tap-highlight-color:rgba(0,0,0,0); background:url( "/carousel-arrow-dark.png")50%50%/20pxno-repeat; /* Let's return our left arrow. */ &.arrow-prev( left:0; ) /* And the second one to the right. Since I'm using the same image for the arrow, I rotate it 180 degrees */ &.arrow-next( right:0; -webkit-transform:rotate(180deg); transform:rotate(180deg); ) ) /* I really like how the carousel slides look at dark background, and if the .carousel-item block has the class "light", we'll change its text to white and use white arrows instead of gray ones. Check again if the path to the arrow image is correct */ &.light( color:white; .arrow( background:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; ) ) /* Write a media query to resize arrows on devices with a smaller screen size.*/ @media(max-width:480px)( .arrow,&.light.arrow( background-size:10px; background-position:10px50% ; ) ) ) /* Set link targets to display: none; Thus, we get rid of the constant jumping of the browser to the very top of the carousel with each click on the arrows. This property applies to any element whose ID starts with "target-item". */ ( display:none; ) /* Above, we made all of our carousel slides transparent, which means that when the carousel loads, we'll get a big empty box instead. Let's change the transparency value for the first slide to 1 for display. We also set the z-index to 2, positioning it above the rest of the slides. */ .item-1( z-index:2; opacity:1; ) /* But we don't want the first slide to always have opacity: 1; otherwise, we'll have to make our way through this slide while the others rotate. */ *:target~.item-1( opacity:0; ) /* ..but if #target-item-1 is in focus and we want to show the first slide then select it with the ~ icon and set the opacity back to 1:-) */ #target-item-1:target~.item-1( opacity:1; ) /* If other target-item-# are in focus, select them using the ~ selector, fade them in, and place them on top with z-index: 3. Here you can add additional spans with the target-item id if you have more than three. Can add 10 items at once.. */ #target-item-2:target~.item-2,#target-item-3:target~.item-3( z-index:3; opacity:1; ) )
Yes, the topic is quite hackneyed. But still, finding what you really need is often difficult. All offer highly sophisticated scripts, with a lot of extra functionality. And usually these are already compressed plugins.
It can be used as an image carousel, news carousel or any other content carousel =)
The only little bells and whistles I allowed myself was the shadow at the carousel block.
UPD: 07/06/2014
It will look something like this: DEMO Download
The structure will look like this:
TJ simple adaptive carousel
Let's describe the styles:
Carousel ( max-width: 1080px; /* width of the entire block */ margin: 50px auto; width:100%; ) content outside the main area */ position:relative; ) .carousel-items ( width: 10000px; /* set a larger width for the item set */ position: relative; /* position the box relative to the main carousel area */ ) .carousel -block ( float: left; /* line up all the carousel elements */ width: 250px; /* set the width of each element */ padding: 10px 10px 10px 0px; /* make padding so that the elements do not merge */ ) .carousel -block img( display:block; ) /*************** BUTTONS ***********/ .carousel-button-left a, .carousel-button-right a( width: 25px; height: 36px; position: relative; top: 80px; cursor: pointer; text-decoration:none; ) .carousel-button-left a( float: left; background: url(../images/carousel- left.png); ) .carousel-button-right a( float: right; background: url(../images/carousel-right.png); ) /*************** SHADOW ***********/ .shadow( box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); )
And finally, how it should work:
//Handling the right arrow click $(document).on("click", ".carousel-button-right",function()( var carusel = $(this).parents(".carousel"); right_carusel(carusel ); return false; )); //Handling left arrow click $(document).on("click",".carousel-button-left",function()( var carusel = $(this).parents(".carousel"); left_carusel(carusel ); return false; )); function left_carusel(carusel)( var block_width = $(carusel).find(".carousel-block").outerWidth(); $(carusel).find(".carousel-items .carousel-block").eq(- 1).clone().prependTo($(carusel).find(".carousel-items")); $(carusel).find(".carousel-items").css(("left":"-" +block_width+"px")); $(carusel).find(".carousel-items .carousel-block").eq(-1).remove(); $(carusel).find(".carousel-items" ).animate((left: "0px"), 200); ) function right_carusel(carusel)( var block_width = $(carusel).find(".carousel-block").outerWidth(); $(carusel).find ("".carousel-items").animate((left: "-"+ block_width +"px"), 200, function()( $(carusel).find(".carousel-items .carousel-block"). eq(0).clone().appendTo($(carusel).find(".carousel-items")); $(carusel).find(".carousel-items .carousel-block").eq(0) .remove(); $(carusel).find(".carousel-items").css(("left":"0px")); )); ) $(function() ( //Uncomment the line below to enable carousel auto scroll auto_right(".carousel:first"); )) // Auto dynamic scrolling function auto_right(carusel)( setInterval(function()( if (!$(carusel).is(".hover")) right_carusel(carusel); ), 3000) ) // Hovered over the carousel $(document).on("mouseenter", ".carousel", function()($(this).addClass("hover"))) // Removed the cursor from the carousel $(document).on("mouseleave", ".carousel", function()($(this).removeClass("hover")))
Accordingly, the shade can be removed. And to use it, you just need to replace the size of the main block and nested "scrolling" blocks in css. It is also very easy to loop this process so that it scrolls automatically (in this case, just uncomment the auto_right function call). That is, you can make everything you need from this unpretentious gallery within the framework of the task!
It should also be noted that this example is adaptive, that is, the size of the carousel adapts according to the screen size and will be displayed correctly both on the screen of a computer or laptop, and on the screens of tablets and smartphones.
1. jQuery carousel "clickCarousel"
Block with scrolling news announcements. The left/right arrows are used to scroll through the blocks. There is a carousel in the archive in two styles: light and dark.
1. jQuery carousel, carouFredSel plugin
A neat and fresh jQuery image carousel.
4. jQuery Plugin: Elastislide Carousel
5. Plugin "TinyCarousel"
Great content sliders in the form of an image carousel using jQuery. The demo page describes how to tie this carousel to your site.
Plugin "Slider Kit", lightweight carousel with different ways scroll.
7. javascript carousel
8. jQuery plugin "Grid Navigation Effects"
Original navigation between image thumbnails. To view the effect on the right side of the demo page, click 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. Easy Paginate block carousel
jQuery plugin "Easy Paginate". Each rectangular block is a regular li list item, and if there are more than three items, then to view them all you need to use a slider-like navigation (using the forward and back arrows and using the navigation buttons at the bottom).
11. Vertical rotator "Vertical Ticker"
jQuery vertical rotator: 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 move the mouse cursor, the movement stops. At the level of HTML markup, scrollable boxes are represented by regular li list items.
12. javascript css scrollable area
javascript "TinyScroller" solution to create a scrollable area placed in a DIV container.
13. jQuery Smooth Div Scroll Plugin
Plugin to implement horizontal scrolling of content in a specific area. When you move the mouse cursor over the left or right edge of the area, scrolling starts.
Navigation between slides with content can be done using arrows or by clicking on a thumbnail. Below there is a "Show" button that allows you to hide / show thumbnails or Full description slide.
15. Content rotator "Circular Content Carousel"
17. Scroller
A block with a scroller that appears when you hover over the cursor. You can scroll through content using both the scroll bar and the mouse wheel.
The jQuery-like solution was inspired by a similar effect on the Apple site. The developers of this corporation have always found interesting solutions that inspired webmasters from all over the world. To demonstrate the plugin, select one of the categories from the list.
19. Awesome slider
The slider is generated automatically. Data with product name, description, link and image address is taken from slider.db.txt file. Technologies used: CSS, PHP, jQuery.
20. Block rotation using jQuery
To see 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 show the latest news or to show Twitter flyers on the site.
This plugin converts list items (ul li) to jQuery elements carousels.
26. javascript carousel "ImageFlow"
Images are easy to scroll with the mouse wheel.
27. Scrolling content
A compact block with the announcement of the latest materials on the site or news. The left column displays a paginated list of brief announcements of the latest news. When you select one of them, the right column displays more than detailed description and a link to read the full text of the publication. Implemented with jQuery.
Images with links are scrolled, when you hover over the mouse, the scrolling stops and the navigation bar appears. When you hover the mouse over the image, its name is also displayed between the control buttons. Looks great on the page
The latter, storing the complete configuration of the hardware and software of the device, plays a key role in the operation of the entire system. In order to open...
