Full Swiper JS Demo
This demonstrates: 1. Arrows outside of slider 2. Filtering 3. Variable Rows 4. Variable Columns 5. Passing a configuration via variable compatible with multiple slides per page 6. Cacheable JS and CSS 7. Responsive resizing 8. Solving the issue of switching to a filter that has fewer advances than the one are currently on One question to figure out is why there are only 3 rows for the awards filter instead of 4 rows OR 4 cols and 2 rows. 2 cols and 3 rows does not make sense unless swiper can't properly adjust for missing slides. More testing is needed with other filter variations.
by Brian Layman
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
<div id="demoswiper1" class="sd_slider_wrapper">
<div class="categories">
<span data-filter="all" class='active'>All</span>
<span data-filter="group_awards">Awards</span>
<span data-filter="group_videos">Videos</span>
<span data-filter="group_press">Press</span>
<span data-filter="group_reviews">Reviews</span>
</div>
<div class="swiper-container" style="cursor: grab;">
<div id="slidehomewrapper" class="swiper-wrapper slidehome-wrapper">
<div class="swiper-slide group_awards"> <a href="https://www.red-dot.org/en/search?q=securedata" target="_blank" rel="noopener" ><img src="https://securedrive.com/wp-content/uploads/2019/05/securedata-red-dot-2019-winner.png" alt="SecureData Wins Red Dot Award 2019"></a>
</div>
<div class="swiper-slide group_reviews"> <a href="https://www.pcworld.com/article/3359444/securedrive-bt-review.html" target="_blank" rel="noopener" ><img src="https://securedrive.com/wp-content/uploads/2017/03/pworld-seucredata-review-1.jpg" alt="PCWorld SecureData Review"></a>
</div>
<div class="swiper-slide group_awards"> <a href="https://finance.yahoo.com/news/securedata-adds-another-prestigious-award-130000628.html" target="_blank" rel="noopener" ><img src="https://securedrive.com/wp-content/uploads/2019/08/securedata-wins-cinegear-expo-2019-award-for-technology-achievement.png" alt="SecureData Wins Cine Gear Expo 2019 Data Storage Technology Achievement Award"></a>
</div>
<div class="swiper-slide group_awards"> <a href="http://classifieds.usatoday.com/press/securedrive-bt-wins-2019-nab-show-product-of-the-year-award/" target="_blank" rel="noopener" ><img src="https://securedrive.com/wp-content/uploads/2017/03/nab-show-2019-product-of-the-year-award-2.png" alt="SecureData Wins NAB Show 2019 Product of the Year"></a>
</div>
<div class="swiper-slide...CSS
/* ==========================================================================
General Demo CSS for this specific demo
========================================================================== */
* { box-sizing: border-box }
.categories span {
padding: 20px;
}
.categories span.active {
color: darkred;
font-size: 1.5em;
}
/* ==========================================================================
Standardized CSS that can be in a separate file
========================================================================== */
/* ==========================================================================
sd_slider_wrapper container
========================================================================== */
.sd_slider_wrapper {
position: relative;
/* Place Arrows Outside slider */
padding-left: 2em;
padding-right: 2em;
width: 100%;
}
/* ==========================================================================
Swiper modifications
========================================================================== */
.swiper-wrapper {
/* now pagination is below slides */
margin-bottom: 3em;
text-align: center;
}
/* doubleing up specificity to win over on transform */
.swiper-slide.swiper-slide {
/* a single column layout */
margin-top: 30px;
}
.swiper-slide.swiper-slide img {
max-width: 100%;
max-height: 100%;
}
.swiper-pagination {
/* show on small viewports */
display: block;
}
/* now move prev button more to the left */
.swiper-button-prev {
left: 5px;
}
/* now move prev button more to the right */
.swiper-button-next {
right: 5px;
}
.swiper-button-prev, .swiper-button-next {
/* 50% container height * (elementheight / 2) */
top: calc(50% - 24px);
margin-top: auto;
margin-bottom: auto;
height: 48px;
}
/* ==========================================================================
Coloration to make...JavaScript
/* ==========================================================================
This script section can be cached in a separate JavaScript file, assuming
global variables are set by the coder or calling PHP engine (WordPress).
========================================================================== */
function rebuildSwiper(swiperQuery) {
// Note that defaults are required for each parameter
var rowCount = window[$(swiperQuery)[0].id + '_ConfigGlobal'].rowCount || 1;
var colCount = window[$(swiperQuery)[0].id + '_ConfigGlobal'].colCount || 2;
var colsToAdvance = window[$(swiperQuery)[0].id + '_ConfigGlobal'].colsToAdvance || 1;
var spacing = window[$(swiperQuery)[0].id + '_ConfigGlobal'].spacing || 30;
// If there are more columns than slides, reduce the row count to 1 row.
if ( $(swiperQuery + ' .swiper-container').find(".swiper-slide").length <= colCount ) {
rowCount = 1;
}
// Restrict the ColsToAdvanced to be at most the number of columns displayed.
// Otherwise we could skip over slides.
if ( colsToAdvance > colCount ) {
colsToAdvance = colCount;
}
new Swiper( swiperQuery + ' .swiper-container',
{
spaceBetween: spacing,
slidesPerView: colCount,
slidesPerColumn: rowCount,
slidesPerGroup: colsToAdvance,
centeredSlides: true,
keyboardControl: true,
grabCursor: true,
// pagination
pagination: '.swiper-pagination',
paginationClickable: true,
// navigation arrows
nextButton: swiperQuery + ' .swiper-button-next',
prevButton: swiperQuery + ' .swiper-button-prev',
loop: false,
centeredSlides: false,
initialSlide: 0,
}
);
}
function returnReadyFunction( swiperQuery ) {
// This puts swiperQuery within the scope of the returned function.
// ready() requires this enclusure process to allow a passed variable.
return function() {
'use strict';
rebuildSwiper( swiperQuery );
$(swiperQuery...