|
<!-- Example frontend markup for a Global slideshow block using the builtin slider --> |
|
|
|
<div id="blox_global_354" class="blox-container blox-content-slideshow blox-theme-default blox-scope-local "> |
|
<div class="blox-wrap"> |
|
|
|
<div class="blox-slideshow-container builtin slick-initialized slick-slider slick-dotted" role="toolbar"> |
|
<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" role="listbox" style="opacity: 1; width: 9144px; transform: translate3d(-6858px, 0px, 0px);"> |
|
|
|
<!-- Slide with just an image --> |
|
<div id="slide_ui4p" class="blox-slideshow-item image slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1143px;"> |
|
<img width="800" height="400" src="http://demo:8888/wp-content/uploads/2016/03/sample-image.png" class="" alt="" title="sample-image" srcset="http://demo:8888/wp-content/uploads/2016/03/sample-image.png 800w, http://demo:8888/wp-content/uploads/2016/03/sample-image-300x150.png 300w, http://demo:8888/wp-content/uploads/2016/03/sample-image-768x384.png 768w" sizes="(max-width: 800px) 100vw, 800px"> |
|
</div> |
|
|
|
<!-- Slide with caption --> |
|
<div id="slide_j9mp" class="blox-slideshow-item image slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1143px;"> |
|
<img width="800" height="400" src="http://demo:8888/wp-content/uploads/2016/03/sample-image.png" class="" alt="" title="sample-image" srcset="http://demo:8888/wp-content/uploads/2016/03/sample-image.png 800w, http://demo:8888/wp-content/uploads/2016/03/sample-image-300x150.png 300w, http://demo:8888/wp-content/uploads/2016/03/sample-image-768x384.png 768w" sizes="(max-width: 800px) 100vw, 800px"> |
|
<div class="blox-caption-container"> |
|
<div class="blox-caption-wrap"> |
|
Sample Image Caption |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- Slide with link and caption --> |
|
<div id="slide_k6uu" class="blox-slideshow-item image slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1143px;"> |
|
<a href="http://www.example.com" target="_blank" title="The Link Title"> |
|
<img width="800" height="400" src="http://demo:8888/wp-content/uploads/2016/03/sample-image.png" class="" alt="" title="sample-image" srcset="http://demo:8888/wp-content/uploads/2016/03/sample-image.png 800w, http://demo:8888/wp-content/uploads/2016/03/sample-image-300x150.png 300w, http://demo:8888/wp-content/uploads/2016/03/sample-image-768x384.png 768w" sizes="(max-width: 800px) 100vw, 800px"> |
|
</a> |
|
<div class="blox-caption-container"> |
|
<div class="blox-caption-wrap"> |
|
Sample Image Caption |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- When images are set to background, the markup looks like the following --> |
|
|
|
<!-- Background Enabled - Slide with just an image --> |
|
<div id="slide_ui4p" class="blox-slideshow-item image slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1143px;"> |
|
<div class="blox-image-background" style="background-image: url(http://demo:8888/wp-content/uploads/2016/03/sample-image.png)"> |
|
</div> |
|
</div> |
|
|
|
<!-- Background Enabled - Slide with caption --> |
|
<div id="slide_j9mp" class="blox-slideshow-item image slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1143px;"> |
|
<div class="blox-image-background" style="background-image: url(http://demo:8888/wp-content/uploads/2016/03/sample-image.png)"> |
|
<div class="blox-caption-container"> |
|
<div class="blox-caption-wrap"> |
|
Sample Image Caption |
|
</div> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
|
|
<!-- Background Enabled - Slide with link and caption --> |
|
<div id="slide_k6uu" class="blox-slideshow-item image slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1143px;"> |
|
<div class="blox-image-background" style="background-image: url(http://demo:8888/wp-content/uploads/2016/03/sample-image.png)"> |
|
<a href="http://www.example.com" target="_blank" title="The Link Title"></a> |
|
<div class="blox-caption-container"> |
|
<div class="blox-caption-wrap"> |
|
Sample Image Caption |
|
</div> |
|
</div> |
|
</div> |
|
</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" style="display: block;" role="tablist"> |
|
<li class="" aria-hidden="true" role="presentation" aria-selected="true" aria-controls="navigation00" id="slick-slide00"> |
|
<button type="button" data-role="none" role="button" 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" 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" tabindex="0">3</button> |
|
</li> |
|
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation03" id="slick-slide03" class=""> |
|
<button type="button" data-role="none" role="button" tabindex="0">4</button> |
|
</li> |
|
<li aria-hidden="true" role="presentation" aria-selected="false" aria-controls="navigation04" id="slick-slide04" class=""> |
|
<button type="button" data-role="none" role="button" tabindex="0">5</button> |
|
</li> |
|
<li aria-hidden="false" role="presentation" aria-selected="false" aria-controls="navigation05" id="slick-slide05" class="slick-active"> |
|
<button type="button" data-role="none" role="button" tabindex="0">6</button> |
|
</li> |
|
</ul> |
|
</div> |
|
<script type="text/javascript"> |
|
jQuery(document).ready(function($){ |
|
$( '#blox_global_354 .blox-slideshow-container.builtin').slick({ |
|
adaptiveHeight: false, |
|
autoplay: false, |
|
autoplaySpeed: 7000, |
|
arrows: true, |
|
dots: true, |
|
fade: false, |
|
infinite: true, |
|
pauseOnHover: false, |
|
speed: 600, |
|
}); |
|
}); |
|
</script> |
|
</div> |
|
</div> |