Image rotator for WordPress - plugin “Merry Carousel. Logo Slider or Horizontal Carousel for WordPress
Plugins for online trading. It will help you create a successful online store in just a few hours.
Creating a website with your own design from scratch to get all the features an online store needs can cost hundreds of dollars to developers, but with the WooCommerce plugin, all you need to do is choose a hosting provider and a theme for the site.
The WooCommerce plugin is completely free, but you may want to use other plugins to enhance your store's functionality.
This post contains the best product sliders for the WooCommerce plugin that will make your website more user-friendly and professional.
WooCommerce Product Slider Let's start with this free WooCommerce Product Slider. It is completely , so it will work perfectly on any device.You can customize the plugin to suit all your requirements, for example, change colors. You can change slider styles either by interfering with its -file or without touching the code. The plugin contains beautiful effects, navigation arrows and pagination.
Cost: Free
WooCommerce Product Slider/Carousel/Grid This is a premium WooCommerce product slider that will make your store look amazing.Thanks to the fully responsive design, the slider will display correctly on small screens of mobile devices. You can divide products into categories, display them in a grid or running tape. The slider can be used to display recommended products, which will significantly increase the number of sales.
This plugin offers four ready-to-use widgets and also provides the ability to place a slider or product grid anywhere on the site.
Cost: $22
Attention! This plugin is an addition to , which costs $49.00–$149.00.
Cost: $29.00–$99.00
The plugin provides three ready-to-use layouts, and the feed can display both images and videos. Thanks to lazy loading, the feed will not increase the site loading time. There is also page numbering and navigation implemented.
You can customize the widget's colors using a palette, and also add categories and tags to products.
Cost: $19
The premium version of this slider has
Conclusion With a slider, any website will look more beautiful, and if you use it as a showcase, the store will attract more attention from customers and will look more professional.All the above-mentioned WooCommerce plugins are good enough to take your online store to the next level.
Hello! We continue to analyze the most interesting and most useful plugins for the WordPress site! Today you will learn how to add a stylish carousel slider of posts, products, videos and images to your website. You can customize the appearance of the slider. You can choose what should be displayed in the carousel, posts, products, images or videos. You can customize the display of the carousel for mobile devices. You can enable navigation, select image size, specify the number of columns in the carousel, etc. Everything is very simple and fast! Look further!
For Woocommerce products you can customize the display of price, rating, title, button "Add to Basket", discounts. You can add a button to quickly view a product in a lightbox window. You can add products from categories, tags, or select specific products.
You can install the Carousel Slider plugin directly from the WordPress admin panel. Go to page: Plugins – Add new, enter the name of the plugin in the search form, press Enter, install and activate the plugin.
Next, after installing and activating the plugin, go to the page: Carousel Slider – All Slides. All created carousels will be displayed here. To create a new carousel, click on the button at the top – Add New.
Next, on the carousel creation page, next to the parameter "Slide Type", you need to choose what will be displayed in the carousel, posts, products, videos or images. I'll show you how to set up a carousel for Woocommerce products.
Query Type, here you need to choose where the products will be displayed from, from categories, tags, or select specific products yourself.
– Product per page, specify how many products should be displayed in the carousel.
– Show Title, show the product title.
– Show Price, show the price of the product.
– Show Cart Button, show the button "Add to Basket".
– Show Sale Tag, show a product discount.
– Show Wishlist Button, show the button "Add to favorites" if you have the plugin installed.
– Show Quick View, show button “Quick view”.
– Title Color, select the color of the product title.
– Button Background Color, button background color.
– Button Text Color, the color of the text in the button.
– Carousel Image size, you can select the size of the images.
– Lazy load image, you can enable the function of gradually loading images.
– Slide By, by default in the carousel the slider is shifted by one product.
– Margin Right(px) on item, the size of the carousel borders in pixels.
– Inifnity loop, you can duplicate the last and first elements to get the illusion of a loop.
– Navigation, enable navigation.
– Dots, enable the display of dots in the carousel that show the number of products.
– Navigation & Dots Color, color of bullets (dots).
– Navigation & Dots Color: Hover & Active, color of active bullets and when hovering.
– Autoplay, enable auto-play of the carousel.
– Autoplay Timeout, delay before auto-play.
– Autoplay Speed, auto play speed.
– Autoplay Hover Pause, enable pause when hovering.
– Colums, the number of columns in the carousel.
– Colums: Desktop, the number of columns on the computer.
– Colums: Small Desktop, the number of columns on a small computer.
– Colums: Tablet, the number of columns on the tablet.
– Colums: Small Tablet, the number of columns on a small tablet.
– Colums: Mobile, the number of columns on mobile devices.
– Enter the name of the carousel at the top and click on the button– Publish.
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.
These 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; 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 on large 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: , // Phone settings are disabled, in this case they will // be used tablet settings 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.
Not all sliders and slideshows are suitable for the site. Sometimes they are too big and cover up all other information. On commercial projects installed on WordPress, it is better to place compact sliders that fit in a small part of the page, while switching functionally and not loading the site.
A carousel fits this description - it is a custom slider script that can be placed in any part of the website.
Of course, you won’t roll up your sleeves and type the script yourself - it’s long, difficult and unattainable for a beginner. Therefore, you are better off using the JQuery plugin - a module that automatically integrates JavaScript into the structure of the HTML site. There are many different styled add-ons for adding a carousel slider to your WordPress site. Let's look at the best of them.
SlickThe Slick developers are confident that this plugin will satisfy any webmaster’s needs. If you need a carousel slider, then this module will completely satisfy your request. It is easy to manage - elements can be dragged into the slide sheet directly from the desktop or folder. In addition, the plugin is conveniently displayed to visitors of your WordPress site - with dimming animation or automatic scrolling. The module does not take up much space on the site, and works optimized so that pages with slides do not take too long to load.
Owl CarouselThe second version of the tool was recently released - the Owl Carousel 2.0 plugin. It is suitable for those who do not like to pre-prepare images for loading into the carousel slider. The add-on automatically adjusts the proportions of pictures so that the user can see smooth, even slides. This module will practically not change the page response time to a request, since it provides a lazy initialization function - images begin to load only when the user views them.
The Owl Carousel plugin for WordPress perfectly adapts to mobile devices - it evenly displays even the largest images, while maintaining the integrity of the template. In addition to pictures, you can upload videos and animations to the carousel.
A simple plugin to add a carousel slider to your WordPress site for free. There is nothing special about it compared to other modules, but it also has no obvious shortcomings. It works diligently, is functional and displays pictures correctly in slides. Using it you can create not only a carousel, but also photo galleries. And if the arrangement of elements requires it, you can create vertical scrolling of slides. The Silver Track plugin is distributed free of charge.
A powerful plugin that is difficult to find a competitor. Its advantages:
- adjusts to any screen width;
- the content format in the carousel slider can be “mixed”;
- no need to dig into CSS to change the style;
- weighs less than 8 KB, which is not displayed in any way on the WordPress site;
- built using the latest JQuery library technologies;
- there is an integrated preloader (image loading progress indicator);
- the user can return to the beginning, end, or specific part of the slideshow;
- automatic scrolling;
- You can view single images from the carousel slider in full screen.
If you are already tired of ordinary flat sliders, then you can install a 3D carousel on your WordPress site. The plugin is provided free of charge. Moreover, each user can make edits to its code. As a result, you will get a slider with a smooth 3D transition effect. But this module has practically no settings. So without knowledge of programming languages you cannot change it.
None of the above can compare with this slider. It allows you to create a truly 3D carousel. The user will be able to rotate individual slides in a circle with just one turn of the mouse. Moreover, you can rotate them not only left and right, but also down/up. Suitable for dynamic viewing of images on WordPress, if you do not need to show details, but just brighten up the site template with some bells and whistles. The only downside of the WordPress plugin is that it works differently on different browsers and devices. This 3D slider has the best compatibility with Chrome and Safari browsers.
This is one of the simplest, yet popular plugins based on Bootstrap technology. With it, you can install a widescreen slider on your home page, which will automatically switch square slides. There are arrows on the sides of the interface for switching, and the module effectively adapts to other devices.
This is an improved version of the previous WordPress plugin. Suitable for those who are tired of one big changing picture on the background of the main page. The improvement of the slider is that it allows you to add many pictures to one slide at once. Under each image you can add a title and a short description. This way you can effectively and with a twist introduce users to your products and current promotions. Autoscroll speed is adjustable.
This is a tiny carousel slider, designed for placement in posts rather than on the main page. Tiny Circleslider differs from ordinary rectangular and square carousels - it is a round module. And it is scrolled using a completely different principle - users click on the numbers of the slides, which are placed in a circle. Or rotates the red circle, quickly switching slides between each other. For those who have not yet encountered this, this plugin will definitely make the right impression, and your WordPress site will be remembered!
Slider for placement among content. Great for adding to articles with step-by-step lessons to neatly load educational pictures. Although it looks like a small slider, you can insert large images into it. When you hover over a large version of an image on a slide, the image will automatically enlarge in the specified area. The slider can be placed both horizontally and vertically. Works with all web browsers and also displays perfectly on smartphones and other iOS and Android devices.
A WordPress slider that contains over 50 different animated slide switching effects. It is enough to install this module so that the carousel on your website is always unique and inimitable. You can add a slide preview function when you hover over items, picture descriptions, visual transition effects and much more. Wowslider is free!
How to choose the right carousel for your WordPress site?The slider you choose should work with all devices. Correctly determine the size of the plugin: for the title you need large slides, and for posts - small ones. Make sure that the module does not slow down the site, and do not add too many carousels to the pages.
Hello. On today's agenda is another nice and convenient slider - carousel. TouchCarousel - Posts Content Slider for WordPress - this rather long name hides exactly the slider that I really needed in one of my projects. Let's see what he is and what he can do.
TouchCarousel is a flexible and at the same time very easily customizable WordPress, intended, as I see it, not so much as the main one for the main page of the site, but rather for insertion into individual posts, pages, sidebars, footers. Although, in principle, nothing prevents you from displaying it as the main slider on the main page. Personally, at one time, I needed it specifically to display content (posts) in the sidebar strictly according to categories. And he coped with his task perfectly.
Let's list the main features and advantages TouchCarousel
- Displays both pictures and posts with hyperlinks.
- Flipping slides is possible either automatically or simply by moving the mouse ( Mouse drag navigation).
- The slider has four pre-prepared shapes and five designs.
- In addition, you can easily create your own form using CSS. For those who are not familiar with this matter, you can simply change the parameters in one of the prepared options and save them as your own.
Installation is standard for a premium plugin. Downloaded and uploaded to the server via FTP or simply download and activate a pre-downloaded plugin from the admin panel in the plugins menu.
Description and settingsAfter installation, the TouchCarousel item will appear in the admin menu with a single page - a list of all your future ones. Create a new slider at the top of the page - Add New and go straight to its settings.
Set the future name.
Post type— select the target slides for display. Category, individual posts or portfolio pages.
Post taxonomies- depends on what you chose in the previous option. Select a category (categories here, by the way, helpfully appear on their own, if they exist of course), in other cases, display the corresponding items in your portfolio or even your online store.
Max posts to include– the maximum number of images to display in the slider.
Carousel item layout type:
There are four types of pre-prepared slider forms in total.
Full picture with title below 620×350 Picture with text 620×270
There is also one last type designed for your own version.
There are two windows downstairs Item layout HTML And Item layout CSS in which you can easily make any edits and additional settings.
On the right is the panel General Options with many small settings for the created slider.
You can adjust the exact dimensions, disable auto-scrolling, change the skin, and specify how many pictures the carousel will move at a time. Configure the display of various controls, connect a keyboard to the controls if desired, and adjust the slide scrolling speed.
To insert a slider into a text slider in the sidebar, do not forget to check the checkbox Preload files V General Options.
This is how you get a very convenient carousel slider for your WordPress project. After creating and saving it, return to the list of all your sliders and copy from there, which you can paste wherever you need.
You can purchase the plugin and get excellent support in Russian on its official page.
Detailed video with examples.
