<link href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
<link href="https://dl.dropbox.com/s/hqsnksirffgp63u/instagram.css?dl=0" rel="stylesheet">
<div class="igpost_wrap">
<div class="ig_image">
<div class="slider">
<input checked="" type="radio" name="slider" id="s0" selected="false">
<input type="radio" name="slider" id="s1" selected="false">
<input type="radio" name="slider" id="s2" selected="false">
<input type="radio" name="slider" id="s3" selected="false">
<input type="radio" name="slider" id="s4" selected="false">
<div class="slides">
<div class="slide">
<div class="img" style="background-image:url(https://cdnw.nickpic.host/rUyeNq.jpg)"></div>
<label class="next" for="s1">
<i class="fas fa-chevron-circle-right"></i>
</label>
</div>
<div class="slide">
<label class="prev" for="s0">
<i class="fas fa-chevron-circle-left"></i>
</label>
<div class="img" style="background-image:url(https://cdnw.nickpic.host/rUyLuD.jpg)"></div>
<label class="next" for="s2">
<i class="fas fa-chevron-circle-right"></i>
</label>
</div>
<div class="slide">
<label class="prev" for="s1">
<i class="fas fa-chevron-circle-left"></i>
</label>
<div class="img" style="background-image:url(https://cdnw.nickpic.host/rUyPz5.jpg)"></div>
<label class="next" for="s3">
<i class="fas fa-chevron-circle-right"></i>
</label>
</div>
<div class="slide">
<label class="prev" for="s2">
<i class="fas fa-chevron-circle-left"></i>
</label>
<div class="img" style="background-image:url(https://cdnw.nickpic.host/rUyTWP.jpg)"></div>
<label class="next" for="s4">
<i class="fas fa-chevron-circle-right"></i>
</label>
</div>
<div class="slide">
<label class="prev" for="s3">
<i class="fas fa-chevron-circle-left"></i>
</label>
<div class="img" style="background-image:url(https://cdnw.nickpic.host/rUyJmd.jpg)"></div>
</div>
</div>
<div class="nav">
<label class="bottom" for="s0"></label>
<label class="bottom" for="s1"></label>
<label class="bottom" for="s2"></label>
<label class="bottom" for="s3"></label>
<label class="bottom" for="s4"></label>
</div>
</div>
<style>
.igpost_wrap #s0:checked~.nav>label[for="s0"],
.igpost_wrap #s1:checked~.nav>label[for="s1"],
.igpost_wrap #s2:checked~.nav>label[for="s2"],
.igpost_wrap #s3:checked~.nav>label[for="s3"],
.igpost_wrap #s4:checked~.nav>label[for="s4"] {
background: #ffffff;
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
.igpost_wrap #s0:checked~.slides {
margin-left: 0;
}
.igpost_wrap #s1:checked~.slides {
margin-left: -100%;
}
.igpost_wrap #s2:checked~.slides {
margin-left: -200%;
}
.igpost_wrap #s3:checked~.slides {
margin-left: -300%;
}
.igpost_wrap #s4:checked~.slides {
margin-left: -400%;
}
</style>
<div style="display:none;">
<input type="radio" name="radio-buttons" id="img-1" checked />
<li class="slide-container">
<div class="slide-image" style="background-image:url(https://cdnw.nickpic.host/rUyeNq.jpg)">
</div>
<div class="c-controls">
<label for="img-5" class="prev-slide"></label>
<label for="img-2" class="next-slide"></label>
</div>
</li>
<input type="radio" name="radio-buttons" id="img-2" />
<li class="slide-container">
<div class="slide-image" style="background-image:url(https://cdnw.nickpic.host/rUyLuD.jpg)">
</div>
<div class="c-controls">
<label for="img-1" class="prev-slide"></label>
<label for="img-3" class="next-slide"></label>
</div>
</li>
<input type="radio" name="radio-buttons" id="img-3" />
<li class="slide-container">
<div class="slide-image" style="background-image:url(https://cdnw.nickpic.host/rUyPz5.jpg)">
</div>
<div class="c-controls">
<label for="img-2" class="prev-slide"></label>
<label for="img-4" class="next-slide"></label>
</div>
</li>
<input type="radio" name="radio-buttons" id="img-4" />
<li class="slide-container">
<div class="slide-image" style="background-image:url(https://cdnw.nickpic.host/rUyTWP.jpg)">
</div>
<div class="c-controls">
<label for="img-3" class="prev-slide"></label>
<label for="img-5" class="next-slide"></label>
</div>
</li>
<input type="radio" name="radio-buttons" id="img-5" />
<li class="slide-container">
<div class="slide-image" style="background-image:url(https://cdnw.nickpic.host/rUyJmd.jpg)">
</div>
<div class="c-controls">
<label for="img-4" class="prev-slide"></label>
<label for="img-1" class="next-slide"></label>
</div>
</li>
<div class="carousel-dots">
<label for="img-1" class="carousel-dot" id="img-dot-1"></label>
<label for="img-2" class="carousel-dot" id="img-dot-2"></label>
<label for="img-3" class="carousel-dot" id="img-dot-3"></label>
<label for="img-4" class="carousel-dot" id="img-dot-4"></label>
<label for="img-5" class="carousel-dot" id="img-dot-5"></label>
</div>
</ul>
</div>
</div>
