Next, update the image field image style to flexslider_thumbnail. This is crucial for syncing the two sliders.Update the FlexSlider format settings to reflect the following (make sure you select This block (override)): Change the display name to Carousel Controls to distinguish it from the Main Rotation block view. The easiest way to do this is to clone the Main Rotations block we just created. Now we need to create the carousel controls block view. If this field accepts multiple values, make sure Display all values in the same row is unchecked. In my example for Formatter is set to image, my Image style is set to flexslider_full and Link image to is set to Nothing.
In my case, I created a custom content type called Rotations with an image field called Rotation Images. Click Continue and edit.Ĭlick Settings next to the FlexSlider format and select Main Rotations** for the Option set. Make sure the Items per page"field is empty. Select FlexSlider as the Display Format and select the output as fields.
Create a new view at admin/structure/views/add and select Create a block. In my demonstration, I created a new content type called Rotations which is holding the images for my FlexSlider. Now we are going to create a view with two block displays. Under the General Slideshow and Animation Settings tab, make sure the following are configured: Navigate back to the FlexSlider configuration page and another option set at admin/config/media/flexslider/add.
Make sure FlexSlider Views Style is enabled as we will be using Views to create the final result. Using a carousel on the other hand keeps the design clean simple.įor this tutorial you will need to install FlexSlider, FlexSlider Library and Views. When using a thumbnail navigation, ALL images appear under the thumbnails. One important thing to note is that this is not the same thing as using FlexSlider's ability to navigate using thumbnails. A user will be able to navigate through the main rotations using the carousel as controls as seen below. We will create a main rotation that feature images from a corresponding image carousel. In this tutorial we are going to combine two FlexSliders. This is perfect for creating banner slideshows, or just organizing images. Drupal's FlexSlider module allows for creation of responsive image sliders and carousels.
0 kommentar(er)
