About
Themes
Slider
Slider..
Slider version 1
ready
		<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
ready
		<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>