Skip to content

Instantly share code, notes, and snippets.

@Mindgames

Mindgames/index.html

Created August 14, 2016 18:07
Show Gist options
  • Save Mindgames/2314c0a9829a9354206020504dfed05e to your computer and use it in GitHub Desktop.
Save Mindgames/2314c0a9829a9354206020504dfed05e to your computer and use it in GitHub Desktop.
Download ZIP
Swiper with Toggle btn group
Raw
index.html
<div class="container">
<div class="nav-group" data-toggle-name="radius_options">
<div onClick="swiper.slideTo(0,400,true);" class="nav active" data-toggle="button">INFO</div>
<div onClick="swiper.slideTo(1,400,true);" class="nav" data-toggle="button">REGLER</div>
<div onClick="swiper.slideTo(3,400,true);" class="nav">ÖVRIGT</div>
</div>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><div>
tenetur voluptate, dolores nesciunt eaque distinctio nisi cumque laboriosam reiciendis consectetur? Nesciunt, distinctio ducimus velit debitis a reprehenderit cumque laudantium? Inventore doloribus ea ipsam expedita!</div></div>
<div class="swiper-slide"><div>Slide 2</div></div>
<div class="swiper-slide"><div>Slide 3</div></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
</div></div>
Raw
script.babel
const swiper = new Swiper('.swiper-container', {
//nextButton: '.swiper-button-next',
//prevButton: '.swiper-button-prev',
pagination: '.swiper-pagination',
//paginationType: 'progress'
});
$(document).ready(function() {
$(".nav").click(function () {
$(".nav").removeClass("active");
$(this).addClass("active");
});
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Raw
style.scss
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-slide {
> div {
padding: 10px;
}
}
.swiper-container {
width: 100%;
//padding:5px;
height: 300px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
//line-height: 300px;
}
.container {
margin-top: 15px;
width: 380px;
max-width: 100%;
margin: auto;
}
.nav-group {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background: #f9f9f9;
border-bottom: 1px solid #f2f2f2;
}
.nav {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-weight: 500;
color: #cdcdcd;
&.active {
color: #000;
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment