{"id":29651,"date":"2021-09-12T15:00:55","date_gmt":"2021-09-12T13:00:55","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=29651"},"modified":"2024-01-30T15:15:53","modified_gmt":"2024-01-30T14:15:53","slug":"how-to-create-image-slider-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-image-slider-in-wordpress\/","title":{"rendered":"How to Create an Image Slider in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]With WordPress, creating a website is easy enough. Creating an arresting, eye-catching website is a different kettle of fish, and text alone just doesn\u2019t cut it when there is no shortage of beautifully designed graphical elements to choose from. In this tutorial, we will be showing you one of them: the WordPress image slider.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Creating an image slider in WordPress is easy<\/strong>, and we will be showing you how to do it using just one of the 60 beautiful and functional widgets which come with our very own <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\">Qi Addons for Elementor<\/a> plugin. But before we show you how to create an arresting image slider, we\u2019d like to take some time to discuss the sliders themselves and some use cases you might want to consider. Here\u2019s what we\u2019ll be talking about.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-are-image-sliders\">What Are Image Sliders<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#when-to-use-image-sliders\">When To Use Image Sliders<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#when-not-to-use-image-sliders\">When Not To Use Image Sliders<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#create-an-image-slider-using-qi-addons-for-elementor\">How to Create an Image Slider Using Qi Addons for Elementor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#create-a-full-width-image-slider-using-qi-addons\">How to Create a Full-Width Image Slider Using Qi Addons<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-are-image-sliders\"><\/a>What Are Image Sliders<\/h2>\n<p>[\/vc_column_text][vc_column_text]In web design, an image slider is a slideshow of images used on a web page. They consist of<strong> several images which shift positions in a transition animation<\/strong> either automatically or as a response to user action such as a click, a scroll or, on mobile devices, a swipe. Whether they are automatic or user triggered, they tend to be attention-grabbing.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Other than the purely aesthetic, though, a slider can also perform navigational functions and convey important information to visitors.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"when-to-use-image-sliders\"><\/a>When To Use Image Sliders<\/h2>\n<p>[\/vc_column_text][vc_column_text]An image slider is typically used as part of a portfolio website or a business website, but there is no real limit to when a slider can be used.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]A well designed image slider will typically contain most of the<strong> important information<\/strong> a website wishes to convey to a user packaged into attractive graphics. For a business website, it might be<strong> a mission statement<\/strong>, for instance. For a bookshop or a film review website, it might be <strong>a showcase of new releases<\/strong>. And any shop might use it to <strong>advertise a brand new time-limited offer<\/strong> or a similar deal.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Alternatively, you could take a minimalist approach: simply<strong> furnish your website with beautiful photos or graphics<\/strong> for your visitors to enjoy \u2013 a solution perhaps most suitable for photography websites, galleries, artist portfolios, or museums.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"when-not-to-use-image-sliders\"><\/a>When Not To Use Image Sliders<\/h2>\n<p>[\/vc_column_text][vc_column_text]There is one downside to image sliders: their size. A slider typically contains a lot of high quality, high resolution images, which <strong>may cause slow loading<\/strong> and slow running of your website, which may lead to bad user experiences, increased <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-reduce-bounce-rate-in-wordpress\/\">bounce rates<\/a>, and poorer SERP rankings.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If using high resolution images, don\u2019t overdo it. And if the downsides outweigh the possible benefits, you\u2019d do best to avoid sliders altogether.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Another thing to consider is mobile devices. If the functionality of your slider is dependent on large format graphics with a lot of fine detail, it may be useless on mobile devices and should probably be excluded or modified for the mobile version of your website.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"create-an-image-slider-using-qi-addons-for-elementor\"><\/a>How to Create a WordPress Image Slider Using Qi Addons for Elementor<\/h2>\n<p>[\/vc_column_text][vc_column_text]We will be creating an <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/image-slider\/\">image slider<\/a> using <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\">Qi Addons for Elementor<\/a>, a <strong>free plugin<\/strong> we have developed in order to expand Elementor\u2019s already impressive array of widgets. Before you begin using it, though, you need to install the latest version of Elementor, and then<strong> install and activate Qi Addons for Elementor.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Qi Addons<strong> will work with the free version of Elementor<\/strong>, so the whole kit and caboodle needn\u2019t cost you a penny. All that matters is that your version of Elementor is up to date. We will also be using our free <a href=\"https:\/\/qodeinteractive.com\/qi-theme\/\">Qi Theme<\/a>, which we heartily recommend, but Qi Addons will work with any theme.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you have done that, adding a WordPress image slider to your website is easy and takes minutes. You can see how it\u2019s done in the video below:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/HO5eCmBDWhU\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]But if you prefer a step-by-step textual tutorial, we\u2019ve got you covered. Read on.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will be adding an image slider to a post, but you could just as easily add it to a page. Adding the image slider widget works as with any other Elementor element: simply find it in the left hand-side menu, and drag it to where you want it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Drag-Image-Slider-Element.jpg\" class=\"attachment-full size-full\" alt=\"Drag Image Slider Element\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Drag-Image-Slider-Element.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Drag-Image-Slider-Element-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Drag-Image-Slider-Element-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Drag-Image-Slider-Element-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You now have the element in place, but it contains no images. To add images, click on the <strong>plus<\/strong> icon in the <strong>Images<\/strong> section of the <strong>Content\/General<\/strong> tab.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Add-Images.jpg\" class=\"attachment-full size-full\" alt=\"Add Images\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Add-Images.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Add-Images-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Add-Images-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Add-Images-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can now select images from your media library or upload some new ones. Once you have made your selection, click<strong> Create Gallery<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Create-Gallery.jpg\" class=\"attachment-full size-full\" alt=\"Create Gallery\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Create-Gallery.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Create-Gallery-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Create-Gallery-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Create-Gallery-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can now review or edit this gallery before inserting it. You can also change the order of your images as they appear in the slider by dragging them. When you are happy with your gallery, click <strong>Insert Gallery.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Insert-Gallery.jpg\" class=\"attachment-full size-full\" alt=\"Insert Gallery\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Insert-Gallery.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Insert-Gallery-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Insert-Gallery-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Insert-Gallery-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You should now be able to see your image slider in the preview section.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"473\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Image-Slider-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Image Slider Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Image-Slider-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Image-Slider-Preview-300x146.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Image-Slider-Preview-768x375.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Image-Slider-Preview-620x303.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving on to the <strong>General\/Slider Settings<\/strong> section, we find the controls for the behaviour of our image slider.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Enable Slider Loop<\/strong> can be set to <em>Yes<\/em> or <em>No<\/em>, and it makes the slider loop back around on itself. We want our images to keep moving on their own, so we are leaving it on Yes, which is the default. The<strong> Enable Centered Slides<\/strong> control is used for centering asymmetrical images, while <strong>Enable Slider Autoplay<\/strong> makes the slider work without user interaction.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Slide Duration<\/strong> and the <strong>Slide Animation Duration<\/strong> are used to set the time for which an image is in place, and the duration of the transition animation. The unit used is milliseconds. We will set our <strong>Slide Duration<\/strong> to <em>2000<\/em>, but we won\u2019t be touching the <strong>Animation Duration Control<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Enable Slider Navigation<\/strong> control enables the user to use arrows to navigate the slider, while the <strong>Enable Slider Pagination<\/strong> governs the slider pagination dots. We won\u2019t be using the dots for this slider we\u2019re creating, so we will switch it to <em>Off<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"604\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Slider-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Slider Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Slider-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Slider-Settings-300x187.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Slider-Settings-768x479.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Slider-Settings-620x386.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next down, the <strong>Image Proportions<\/strong> control has an array of options which you can use to make your images appear more uniform if they aren\u2019t, such as <em>Thumbnail, Square, Portrait,<\/em> and others. We will leave it at the default <em>Original<\/em>, keeping the images\u2019 original proportions.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Enable Partial Column<\/strong> allows you to show the part of the end column you set the <strong>Partial Columns Value<\/strong> for. The <strong>Number of Columns<\/strong> menu allows you to pick the number of columns of your slider. We will set ours to <em>One<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Columns Responsive<\/strong> menu lets you set up different numbers of columns for different device sizes, usually meaning fewer columns on smaller devices. Since we only have one image showing at a time (as per our<strong> Number of Columns<\/strong> setting), we can leave it at <em>Predefined<\/em> as there is no way to show fewer than one column.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Space Between Items<\/strong> slider lets you enter a pixel value between each slide. We will set ours to 0, since we don\u2019t want any space between the images. The <strong>Slide Effect<\/strong> menu lets you choose between the <em>Slide<\/em> and <em>Fade<\/em> transition animations. We will leave ours at <em>Slide<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next down, we find the <strong>Enable Lightbox Popup<\/strong>. If enabled, as is the default, it will open a clicked image in an overlay. The<strong> Image Hover<\/strong> menu controls the behaviour of the slider on mouse hover by the user. You can choose between <em>Zoom In, Zoom Out, None<\/em>, and <em>Move<\/em>. We will be leaving ours at <em>None<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Overlay Color<\/strong> and the <strong>Overlay Hover Color<\/strong> settings provide you with the ability to choose a colour overlay for your images, whether by default, or on hover. We will not be using it for our demonstration.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"500\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Slider-Settings-2.jpg\" class=\"attachment-full size-full\" alt=\"Slider Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Slider-Settings-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Slider-Settings-2-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Slider-Settings-2-768x396.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Slider-Settings-2-620x320.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving on to the <strong>Style<\/strong> tab. You will see two sections: the <strong>Slider Navigation Style<\/strong>, which is concerned with the navigation arrows, and the <strong>Slider Pagination Style<\/strong>, which is to do with pagination. For the purposes of this design, we have switched the pagination off, so we won\u2019t be using those settings.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the <strong>Slider Navigation Style<\/strong> section the first option up is the <strong>Navigation Position<\/strong> menu. Here you can choose the position of the arrows which make the slider switch images. We will place them <em>Outside<\/em>, but you can also choose the default <em>Inside<\/em> and <em>Together<\/em>, which will place them below the picture.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next down, we find the <strong>Hide Navigation<\/strong> option, which lets you hide the navigation arrows for devices below a certain screen width. We will make them invisible for devices<em> Below 768 pixels<\/em> wide.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The offset sliders (<strong>Navigation Vertical Offset<\/strong> and <strong>Navigation Horizontal Offset<\/strong>) let you move the navigation arrows from their default positions. You can slide them yourself or input values in pixels, ems, or percentages. We will not be using the vertical offset slider, but we will set the <strong>Navigation Horizontal Offset<\/strong> to <em>6.5%<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"506\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Style-Navigation.jpg\" class=\"attachment-full size-full\" alt=\"Style Navigation\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Style-Navigation.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Style-Navigation-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Style-Navigation-768x401.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Style-Navigation-620x324.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The next two options are the <strong>Navigation Arrow Previous<\/strong> (left arrow), and<strong> Navigation Arrow Next<\/strong> (right arrow) let you change the default navigation arrows. You can choose one from your icon library or you can upload an SVG. We like the arrows as they are, so we won\u2019t be changing them.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Next down, you can modify the behaviour of your navigational arrows using the <strong>Normal\/Hover<\/strong> toggle. Setting the arrows\u2019 attributes in the <strong>Normal<\/strong> mode will change the arrows as they appear to the user, while the <strong>Hover<\/strong> mode governs their behaviour on mouse hover.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first two options are <strong>Navigation Arrow Color<\/strong> and<strong> Navigation Arrow Background Color<\/strong>. Here you can pick or input the colour for your navigation arrows or their background. We will not be using the colour options for this design.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The last three sliders control the dimensions of the arrow itself and its holder. The <strong>Navigation Arrow Size<\/strong> lets you control the size of the arrow, while the \u201cholder\u201d in <strong>Navigation Arrow Holder Width<\/strong> and <strong>Navigation Arrow Holder Height<\/strong> refers to the arrow\u2019s background. If you have selected a colour for <strong>Navigation Arrow Background<\/strong>, you can use these sliders to change its dimensions. We will increase the size of our arrows to <em>45 pixels<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"664\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Style-Navigation-2.jpg\" class=\"attachment-full size-full\" alt=\"Style Navigation\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Style-Navigation-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Style-Navigation-2-300x206.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Style-Navigation-2-768x526.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Style-Navigation-2-620x425.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Switching to the <strong>Hover<\/strong> section of the toggle, we can see one additional control: <strong>Enable Hover Arrow Move<\/strong>. By default, it animates the arrow once a user hovers their mouse over it. We will switch it to <em>No<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"508\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Style-On-Hover.jpg\" class=\"attachment-full size-full\" alt=\"Style On Hover\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Style-On-Hover.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Style-On-Hover-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Style-On-Hover-768x403.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Style-On-Hover-620x325.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <strong>Slider Pagination Style<\/strong> section offers a similar set of options: colours, offset, borders, and size, but we like our image slider as it is, with navigation arrows only, so we will not be using the pagination options.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That said, our image slider is done.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"575\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Image-Slider.gif\" class=\"attachment-full size-full\" alt=\"Image Slider\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"create-a-full-width-image-slider-using-qi-addons\"><\/a>How to Create a Full-Width Image Slider Using Qi Addons<\/h2>\n<p>[\/vc_column_text][vc_column_text]Now, suppose you want a full width WordPress image slider. With Qi Addons for Elementor, you can do that, too.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first thing you need to do is go to the <strong>Settings<\/strong> section by clicking on the <strong>Gear<\/strong> icon at the bottom of the left hand-side menu. Find the<strong> Page Layout<\/strong> menu and select<em> Elementor Full Width<\/em> as your layout. If you are using our Qi Theme, you can also select <em>Qi Full Width<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"607\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Page-Settings-Full-Width.jpg\" class=\"attachment-full size-full\" alt=\"Page Settings Full Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Page-Settings-Full-Width.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Page-Settings-Full-Width-300x188.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Page-Settings-Full-Width-768x481.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Page-Settings-Full-Width-620x388.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next, click the middle icon of the blue section tab to edit it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"516\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Edit-Section.jpg\" class=\"attachment-full size-full\" alt=\"Edit Section\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Edit-Section.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Edit-Section-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Edit-Section-768x409.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Edit-Section-620x330.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You should see the <strong>Layout<\/strong> tab of your section. The first menu up is <strong>Content Width<\/strong>. It is set to <em>Boxed<\/em>, but you need to change it to <em>Full Width<\/em>. Once you have selected that, the next menu down should be the <strong>Columns Gap<\/strong> menu. Selecting <em>No Gap<\/em> in it will leave no gap between the element and the edges of the screen.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Full-Width-Layout.jpg\" class=\"attachment-full size-full\" alt=\"Full Width Layout\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Full-Width-Layout.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Full-Width-Layout-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Full-Width-Layout-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Full-Width-Layout-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]However, even if you are working with the <em>Boxed<\/em> layout, you can still use the <strong>Width<\/strong> slider to change the width of your widget. If you drag it all the way to the right, or if you input the width of your layout in pixels, you will also get a full-width image slider.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Boxed-Width.jpg\" class=\"attachment-full size-full\" alt=\"Boxed Width\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Boxed-Width.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Boxed-Width-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Boxed-Width-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/09\/Boxed-Width-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you can see, setting up a beautiful, arresting WordPress image slider is easy and only takes a couple of minutes. With Qi Addons for Elementor, it can also be completely free. The widget comes bristling with user-friendly styling options with the effects immediately visible in Elementor\u2019s preview section. Now you know all you need to know in order to create beautiful WordPress image sliders for your website, no matter the style.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Create beautiful and functional image sliders in WordPress within minutes and completely free &#8211; we will show you how.<\/p>\n","protected":false},"author":16990,"featured_media":29670,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[27,114,153,4,13],"class_list":["post-29651","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-content","tag-qi-addons-for-elementor","tag-slider","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/29651","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=29651"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/29651\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/29670"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=29651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=29651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=29651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}