{"id":18700,"date":"2012-05-29T04:57:05","date_gmt":"2012-05-29T08:57:05","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=18700"},"modified":"2016-02-24T03:30:55","modified_gmt":"2016-02-24T08:30:55","slug":"drupal-7-how-to-work-with-js-slider","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/drupal-7-how-to-work-with-js-slider.html","title":{"rendered":"Drupal 7. How to work with JS slider"},"content":{"rendered":"<p>\r\n<\/p>\r\n<p>This  tutorial is going to show you how to work with the JS slider on your\u00a0 Drupal 7 template and add more slides to it.<\/p>\r\n<p>The slider  will show up on your template exactly the same way you it does on the live demo preview  only\u00a0after you have installed your template with the<a href=\"\/help\/how-to-install-drupal-7-theme-sample-data.html\" target=\"_blank\"> sample demo profile<\/a>. <br \/>\r\n Once you  have done that, you can proceed to <strong>editing  the existing slides<\/strong>:<\/p>\r\n<ol>\r\n<li>To find them in your admin, go to  the top <strong>Content<\/strong> menu.\u00a0 Under<strong> Show only items where <\/strong>select<strong> type -&gt;  Slider <\/strong>and\u00a0 click on &ldquo;<strong>Filter<\/strong>&rdquo;. This will open\u00a0  a list of all slides that\u00a0 come with\u00a0  your template sample data.\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on-300x143.jpg\" alt=\"\" title=\"drupal_slider_working_on\" width=\"300\" height=\"143\" class=\"alignnone size-medium wp-image-18701\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on-300x143.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on-1024x488.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on.jpg 1259w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/li>\r\n<li>Click on  &ldquo;<strong>edit<\/strong>&rdquo; under the &ldquo;<strong>OPERATIONS<\/strong>&rdquo; column in order to edit  each\u00a0particular slide.\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_1-300x86.jpg\" alt=\"\" title=\"drupal_slider_working_on_1\" width=\"300\" height=\"86\" class=\"alignnone size-medium wp-image-18702\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_1-300x86.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_1.jpg 911w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/li>\r\n<li>On the  next page,\u00a0 you will see the fields:<\/li>\r\n<ul>\r\n<li><strong>Title <\/strong>where you can change the name of\u00a0 your current slide;<\/li>\r\n<li><strong>Body <\/strong>where you can change the slider description  text;<\/li>\r\n<li><strong>Text<\/strong><strong> format<\/strong><strong> <\/strong>where you can choose the input  format for your content; <\/li>\r\n<li><strong>Upload slide. <\/strong>To change the current slider image,  click on<strong> Remove. <\/strong>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_3-300x78.jpg\" alt=\"\" title=\"drupal_slider_working_on_3\" width=\"300\" height=\"78\" class=\"alignnone size-medium wp-image-18703\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_3-300x78.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_3.jpg 518w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/li>\r\n<li>Click on<strong> Browse ,\u00a0 <\/strong>navigate to your new image on your computer, select it, click<strong> Open. <\/strong>Click <strong>Upload;<\/strong><br \/>\r\n<a href=\"\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_4-300x44.jpg\" alt=\"\" title=\"drupal_slider_working_on_4\" width=\"300\" height=\"44\" class=\"alignnone size-medium wp-image-18704\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_4-300x44.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_4.jpg 576w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/li>\r\n<li><strong>Menu Settings <\/strong>where you can add a menu tab pointed  to the description text you added to the<strong> Body;<\/strong><\/li>\r\n<li><strong>URL Path Settings <\/strong>where  you can manually insert an alternative URL by which this content you added to the<strong> Body<\/strong> can be accessed;<strong><\/strong><\/li>\r\n<li><strong>Publishing options <\/strong>where you can enable\/disable the  slide on your site.<strong><\/strong><\/li>\r\n<\/ul>\r\n<li>Once you  are done, click on<strong> &ldquo;Save&rdquo; <\/strong>at the  very bottom and open the front page of your site to preview the changes. <\/li>\r\n<\/ol>\r\n<h3>In order to add a new slide: <\/h3>\r\n<ol>\r\n<li>Click on the <strong>Add<\/strong> <strong>content<\/strong> menu at the top.<br \/>\r\n<a href=\"\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_5.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_5-300x26.jpg\" alt=\"\" title=\"drupal_slider_working_on_5\" width=\"300\" height=\"26\" class=\"alignnone size-medium wp-image-18705\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_5-300x26.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_5-1024x91.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_5.jpg 1064w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/li>\r\n<li>On  the text page, click on <strong>Slider<\/strong> (use  to create slides in content-slider).\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_6.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_6-300x189.jpg\" alt=\"\" title=\"drupal_slider_working_on_6\" width=\"300\" height=\"189\" class=\"alignnone size-medium wp-image-18706\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_6-300x189.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_6-1024x647.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_6.jpg 1263w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/li>\r\n<li>Specify  the title for the slider content page in the <strong>Text<\/strong> field;<\/li>\r\n<li>Click  on &ldquo;<strong>Browse<\/strong>&rdquo; under the <strong>Upload slide <\/strong>and navigate to the image  on\u00a0 your computer. The image should have  the same height and width as the rest of the slider images. If your new image  is larger, it will be wrongly scaled\/cropped.<\/li>\r\n<li>Make sure that the slide is  published by checking the <strong>Published<\/strong> option in the <strong>Publishing  options;<\/strong><\/li>\r\n<li>Click on<strong> Save <\/strong>at the very bottom;<\/li>\r\n<li>Still  logged as\u00a0 an administrator,\u00a0 go to the to page on your site where the  Slider block is enabled\u00a0 and\u00a0 mouse over the top right corner of your  slider image on the front page. You will see a menu. Click on it. Select &ldquo;<strong>Edit View<\/strong>&rdquo;\u00a0 to modify the display of your <strong>Slider view.<\/strong> Or, alternatively, go to admin -&gt; <strong>Structure -&gt; Views -&gt; Slider.<\/strong>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_7.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_7-300x173.jpg\" alt=\"\" title=\"drupal_slider_working_on_7\" width=\"300\" height=\"173\" class=\"alignnone size-medium wp-image-18707\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_7-300x173.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_7.jpg 722w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/li>\r\n<li>On the next page, under <strong>Displays -&gt; Pager -&gt; Use pager: Display  a specified number of items&nbsp;|&nbsp;# items<\/strong> \u00a0click on  # that stands for the current number of slides in your slider.\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_8.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_8-300x148.jpg\" alt=\"\" title=\"drupal_slider_working_on_8\" width=\"300\" height=\"148\" class=\"alignnone size-medium wp-image-18708\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_8-300x148.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_8-1024x505.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_8.jpg 1262w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/li>\r\n<li>In the lightbox window change the number and click on <strong>Apply (all displays);<\/strong>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_9.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_9-300x192.jpg\" alt=\"\" title=\"drupal_slider_working_on_9\" width=\"300\" height=\"192\" class=\"alignnone size-medium wp-image-18709\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_9-300x192.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_9-1024x657.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2012\/05\/drupal_slider_working_on_9.jpg 1257w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/li>\r\n<li>Click on <strong>&ldquo;Save&rdquo;;<\/strong><\/li>\r\n<li>Open the front end of your site to preview the changes. <\/li>\r\n<\/ol>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<p><a href=\"\/help\/files\/Drupal\/Drupal_js_slider_more_slides_adding.htm\" target=\"blank\">Drupal 7. How to work with JS slider<\/a><\/p>\r\n<\/p>\r\n<\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>This  tutorial is going to show you how to work with the JS slider on your\u00a0 Drupal 7 template and add more slides to it.<\/p>\n","protected":false},"author":30,"featured_media":18715,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[723],"tags":[593,1086,816],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/18700"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=18700"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/18700\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/18715"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=18700"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=18700"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=18700"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}