Slider version 1 Slider version 1 ready View Source Code Open in new window <div id="master"> <section class="slider_full_1_container"> <div class="wrap"> <div class="container-item" role="toolbar"> <slick settings="vm.configSlider" class="slick-initialized slick-slider" style="display: block;"> <button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;">Previous</button> <div aria-live="polite" class="slick-list draggable"> <div class="slick-track" style="opacity: 1; width: 2880px; transform: translate3d(0px, 0px, 0px);" role="listbox"> <div class="item slick-slide slick-current slick-active" data-slick-index="-1" aria-hidden="true" style="width: 960px;" tabindex="-1"> <a href="#" target="_self" title="Look, from now, you can easily manage your apps in Orion!" data-interception="on" tabindex="-1"> <div class="container-img"> <img alt="" src="https://picsum.photos/960/500" style="opacity: 1;"> </div> <div class="container-content"> <div class="infos"> <span class="date">07/17/2020</span> </div> <h3 class="title" data-ellipsis="" data-ellipsis-symbol="…" title="Look, from now, you can easily manage your apps in Orion!">Look, from now, you can easily manage your apps in Orion!</h3> <p class="content" data-ellipsis="" data-ellipsis-symbol="…">We've added a new feature to pin your apps as favorites. Let's discover how it works!</p> <div class="additional-info"> <span class="wrapper-views"> <span class="nb"> <view-count> <span class="nb">15</span> </view-count> </span> </span> </div> </div> </a> </div> </div> </div> <button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;">Next</button> <ul class="slick-dots" role="tablist" style="display: block;"> <li class="" aria-hidden="true" role="presentation" aria-selected="true" aria-controls="navigation00" id="slick-slide00"><button type="button" data-role="none" role="button" aria-required="false" tabindex="0">1</button></li> <li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation01" id="slick-slide01" class=""><button type="button" data-role="none" role="button" aria-required="false" tabindex="0">2</button></li> <li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation02" id="slick-slide02" class=""><button type="button" data-role="none" role="button" aria-required="false" tabindex="0">3</button></li> <li aria-hidden="false" role="presentation" aria-selected="false" aria-controls="navigation03" id="slick-slide03" class="slick-active"><button type="button" data-role="none" role="button" aria-required="false" tabindex="0">4</button></li> </ul> </slick> </div> </div> </section> </div> Slider version 2 Slider version 2 ready View Source Code Open in new window <div id="master"> <section class="pow-slider-full"> <div class="wrap"> <div class="container-item"> <slick class="slick-initialized slick-slider"> <div class="slick-list draggable"> <div class="slick-track" style="opacity: 1; width: 2880px; transform: translate3d(0, 0px, 0px);" role="listbox"> <div class="item slick-slide slick-current slick-active" data-slick-index="-1" aria-hidden="true" style="width: 960px;" tabindex="-1"> <div class="slider-wrapper"> <a href="#" class="slider-image-wrapper" target="_self" data-interception="on" tabindex="-1"> <span class="visuallyhidden">Look, from now, you can easily manage your apps in Orion!</span> <img class="slider-image" alt="" src="https://picsum.photos/960/500"> <span class="slider-image-vignette"></span> </a> <div class="container-content pow-font-regular"> <div class="pow-container"> <div class="row no-gutters"> <div class="slider-content col--5 col-md-6 col-sm-12 col-xs-12"> <div class="slider-taxo pow-color-primary pow-text-size-md"> <span class="pow-taxo" title="IT">IT</span> <span class="pow-taxo" title="Paris">Paris</span> </div> <div class="slider-title"> <span class="pow-color-white" data-ellipsis="" data-ellipsis-symbol="…">Look, from now, you can easily manage your apps in Orion!</span> </div> <div class="pow-margin-bottom-md slider-description"> <span class="pow-color-white pow-max-line-2 pow-text-size-md" data-ellipsis="" data-ellipsis-symbol="…">We've added a new feature to pin your apps as favorites. Let's discover how it works!</span> </div> <div class="slider-readmore"> <a href="#" target="_self" class="pow-big-button-primary" data-interception="on" tabindex="-1">Read more</a> </div> <div class="pow-flex-row pow-flexbox slider-control pow-flex-nowrap"> <button class="pow-button" type="button" tabindex="-1">Prev</button> <div class="pow-flex-row pow-flexbox dot-container pow-flex-fit pow-flex-wrap"> <button class="pow-action-xs icon-color-white icon-circleEmpty" type="button" aria-label="move slider to slide number 1" tabindex="-1"></button> <button class="pow-action-xs icon-color-white icon-circleEmpty" type="button" aria-label="move slider to slide number 2" tabindex="-1"></button> <button class="pow-action-xs icon-color-white icon-circleEmpty" type="button" aria-label="move slider to slide number 3" tabindex="-1"></button> <button class="pow-action-xs icon-color-white icon-circleFill" type="button" aria-label="move slider to slide number 4" tabindex="-1"></button> </div> <button class="pow-button" type="button" tabindex="-1">Next</button> </div> </div> </div> </div> </div> </div> </div> </div> </div> </slick> </div> </div> </section> </div>