Slideshow

Share
المؤلفPosted at

 

Slideshow

  • Bottom 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Bottom 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Explanation

  1. To make slideshow add the data-uk-slideshow attribute to a container <div> element and add these options to that attribute animation: push; autoplay: true; autoplay-interval: 4000

    1. <div data-uk-slideshow="animation: push; autoplay: true; autoplay-interval: 4000">
    2.  
    3. </div>

  2. Add a wrapper <div> with these classes .uk-position-relative, .uk-visible-toggle, .uk-light to adjust the slideshow correctly. Add also the dots items for slides movement

    1. <div data-uk-slideshow="animation: push; autoplay: true; autoplay-interval: 4000">
    2.  
    3. 	<div class="uk-position-relative uk-visible-toggle uk-light">
    4. 	</div>
    5.  
    6. 	<ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
    7.  
    8. </div>

  3. Inside the wrapper element create a list of slides with the class .uk-slider-items. Add also the navigation items for right and left movement

    1. <div data-uk-slideshow="animation: push; autoplay: true; autoplay-interval: 4000">
    2.  
    3. 	<div class="uk-position-relative uk-visible-toggle uk-light">
    4.  
    5. 		<ul class="uk-slideshow-items">
    6.  
    7. 		</ul>
    8.  
    9. 		<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" data-uk-slidenav-previous="" data-uk-slideshow-item="previous"></a>
    10. 		<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" data-uk-slidenav-next="" data-uk-slideshow-item="next"></a>
    11.  
    12. 	</div>
    13.  
    14. 	<ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
    15.  
    16. </div>

  4. Add an image to each item inside the list of slides with the attribute data-uk-cover

    1. <div data-uk-slideshow="animation: push; autoplay: true; autoplay-interval: 4000">
    2.  
    3. 	<div class="uk-position-relative uk-visible-toggle uk-light">
    4.  
    5. 		<ul class="uk-slideshow-items">
    6. 			<li>
    7. 				<img src="assets/img/demo/11.jpg" alt="" data-uk-cover="">
    8. 			</li>
    9. 			<li>
    10. 				<img src="assets/img/demo/12.jpg" alt="" data-uk-cover="">
    11. 			</li>
    12. 			<li>
    13. 				<img src="assets/img/demo/13.jpg" alt="" data-uk-cover="">
    14. 			</li>
    15. 		</ul>
    16.  
    17. 		<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" data-uk-slidenav-previous="" data-uk-slideshow-item="previous"></a>
    18. 		<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" data-uk-slidenav-next="" data-uk-slideshow-item="next"></a>
    19.  
    20. 	</div>
    21.  
    22. 	<ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
    23.  
    24. </div>

  5. To add caption to the image add a wrapper <div> element with the attribute data-uk-slideshow-parallax and add these options inside y: -50,0,0; opacity: 1,1,0. Then add these classes .uk-overlay, .uk-overlay-primary, .uk-position-bottom-right, .uk-position-small, .uk-padding-small, .uk-light. Then inside it add the some elements with texts

    1. <div data-uk-slideshow="animation: push; autoplay: true; autoplay-interval: 4000">
    2.  
    3. 	<div class="uk-position-relative uk-visible-toggle uk-light">
    4.  
    5. 		<ul class="uk-slideshow-items">
    6. 			<li>
    7. 				<img src="assets/img/demo/11.jpg" alt="" data-uk-cover="">
    8. 				<div class="uk-overlay uk-overlay-primary uk-position-bottom-right uk-position-small uk-padding-small uk-light" data-uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">
    9. 					<h4 class="uk-margin-remove">Bottom 1</h4>
    10. 					<p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    11. 				</div>
    12. 			</li>
    13. 			<li>
    14. 				<img src="assets/img/demo/12.jpg" alt="" data-uk-cover="">
    15. 				<div class="uk-overlay uk-overlay-primary uk-position-bottom-right uk-position-small uk-padding-small uk-light" data-uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">
    16. 					<h4 class="uk-margin-remove">Bottom 2</h4>
    17. 					<p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    18. 				</div>
    19. 			</li>
    20. 			<li>
    21. 				<img src="assets/img/demo/13.jpg" alt="" data-uk-cover="">
    22. 				<div class="uk-overlay uk-overlay-primary uk-position-bottom-right uk-position-small uk-padding-small uk-light" data-uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">
    23. 					<h4 class="uk-margin-remove">Bottom 3</h4>
    24. 					<p class="uk-margin-remove">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    25. 				</div>
    26. 			</li>
    27. 		</ul>
    28.  
    29. 		<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" data-uk-slidenav-previous="" data-uk-slideshow-item="previous"></a>
    30. 		<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" data-uk-slidenav-next="" data-uk-slideshow-item="next"></a>
    31.  
    32. 	</div>
    33.  
    34. 	<ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
    35.  
    36. </div>

    • Bottom 2

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Ads go here
Post a Comment
Free Premium Blogger Template Download | Blogger Widget Code | Blogger Tool Script | Blogger wishing website Script|

Comments

Archive

Labels

template

Contact Form

Send