<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Slider css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.css"> <main class="containerMainTwo"> <div class="globalSetting"> <div class="globalCheck"> <div class="globalCheckBox"> <h3>How old do you want to be when you have your first or next child?</h3> <div class="globalDate"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> 1</div> <div class="swiper-slide"> 2</div> <div class="swiper-slide"> 3</div> <div class="swiper-slide"> 5</div> <div class="swiper-slide"> 6</div> <div class="swiper-slide"> 7</div> <div class="swiper-slide"> 8</div> <div class="swiper-slide"> 9</div> <div class="swiper-slide"> 10</div> <div class="swiper-slide"> 11</div> <div class="swiper-slide"> 12</div> <div class="swiper-slide"> 13</div> <div class="swiper-slide"> 14</div> <div class="swiper-slide"> 15</div> <div class="swiper-slide"> 16</div> <div class="swiper-slide"> 17</div> <div class="swiper-slide"> 18</div> <div class="swiper-slide"> 19</div> <div class="swiper-slide"> 20</div> <div class="swiper-slide"> 21</div> <div class="swiper-slide "> 22</div> <div class="swiper-slide"> 23</div> <div class="swiper-slide"> 24</div> <div class="swiper-slide"> 25</div> <div class="swiper-slide"> 26</div> <div class="swiper-slide"> 27</div> <div class="swiper-slide"> 28</div> <div class="swiper-slide"> 29</div> <div class="swiper-slide"> 30</div> <div class="swiper-slide"> 31</div> <div class="swiper-slide">  </div> </div> </div> </div> </div> </div> </div> </main> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>

.containerMainTwo { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 991px; margin: auto; background: #eceef2; position: relative; overflow: hidden; } .globalSetting { padding: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; width: 100%; } .globalSetting h1 { position: relative; font-family: 'Apercu'; font-size: 40px; font-style: normal; font-weight: 400; line-height: 60px; letter-spacing: 0em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-transform: uppercase; margin: 0; padding-bottom: 20px; color: #081458; } .globalSetting h1 span { background: #fff; border-radius: 50%; width: 55px; height: 55px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 4px solid #081458; margin-right: 15px; } .globalCheck h4 { font-family: 'Apercu'; font-size: 24px; font-style: normal; font-weight: 400; line-height: 36px; letter-spacing: 0em; text-align: left; color: #081458; } .globalCheckBox { background: #081458; border-radius: 16px; color: #fff; padding: 60px; } .globalCheckBox h3 { font-family: 'Apercu'; font-size: 31px; font-style: normal; font-weight: 400; line-height: 47px; letter-spacing: 0em; text-align: left; } .globalDate { width: 163px; height: 159px; border: 1px solid #fff; border-radius: 16px; color: #fff; position: relative; font-size: 79px; font-family: 'Apercu'; text-align: center; line-height: normal; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: auto; overflow: hidden; margin: 47px auto 147px; } .globalDate span { position: absolute; bottom: -35%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity: .2; } .globalDate::before { content: ''; background: url('https://img.icons8.com/metro/26/ffffff/arrow.png') no-repeat center center; width: 24px; height: 18px; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: -0%; } .swiper-slide { font-family: 'Apercu'; font-size: 79px; font-style: normal; font-weight: 400; letter-spacing: 0em; height: 120%; line-height: 2.1; cursor: pointer; } .swiper-container { height: 100%; } .swiper-slide-prev, .swiper-slide-next { opacity: .5; }

$(document).ready(function() { var swiper = new Swiper('.swiper-container', { direction: 'vertical', mousewheelControl: true, slidesPerView: 2, freeMode: false, freeModeSticky: true }); })