What we need?
Modules installed and turned on:
- Views
- Views Slideshow
- Flexslider
Part-1
- Add Image Style
- Add Content Type
- Add Flexslider option set
- Create view
1.Add Image Style
Configuration>>Image styles>>Add style
In this is case i will use scale effect.
2.Add Content Type
Configuration>>Image styles>>Add style
Structure >>Content types>>Add Content types
Give it the name, uncheck Promoted to front page , Display author and date information and close comment sittings.
Then go to manage fields and add to existing image.
This is not necessary flexslider will fix this.
3.Add Flexslider option set
Configuration>>Media>>Flex Slider>>Add Option set>>(Don't forget select Image style your created before) and select only Paging Controls
4.Create view
Go to Structure >>Views>>Add new view
Give it the name and select your creeted before type, we create block desplay format will be Slideshow and select of fields and press Continue &edit button
Format will be Slideshow and sittings will Flexslider
Slideshow Type will Flex Slider and dont forget select Option set your creeted before Flex Slider type.
Add fields Image and Body.
Deselect Create a label and select Rewrite the output of this field add some div class
Add fields Image and Title.
Deselect Create a lable, select Link this field to the original piece of content and slelect Rewrite the output of this field add some div class. Then save this block
Place this block what ever you whant.
Add some content use your have created content type.
And add this code in your theme css file.
Final result looks like this if you create responsive site you should add more css code
Attachment | Size |
---|---|
add-content-type.png | 88.68 KB |
add-existing-field.png | 31.34 KB |
Add-new-view.png | 60.55 KB |
add-resize-effect.png | 32.81 KB |
Block-style-options.png | 46.89 KB |
content-types.png | 69.63 KB |
Edit-flexslider-option-set.png | 69.72 KB |
Views-block-conf.png | 30.68 KB |
Body-conf.png | 36.06 KB |
Title-conf.png | 35.52 KB |
place-block.png | 40.42 KB |
create-content.png | 30.03 KB |
some-css-code.png | 27.02 KB |
result.png | 199.46 KB |