Skip to content

Instantly share code, notes, and snippets.

@nblenke

nblenke/index.html

Last active September 22, 2015 20:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nblenke/c2460af8d29778b10470 to your computer and use it in GitHub Desktop.
Save nblenke/c2460af8d29778b10470 to your computer and use it in GitHub Desktop.
Download ZIP
carousel blur on slide change
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.8/css/swiper.min.css">
<style>
.swiper-container img {
max-width:100%;
}
.swiper-slide {
overflow:hidden;
}
.swiper-slide img {
transform:scale(1.1);
transition:-webkit-filter 400ms linear;
transition-delay:2s;
}
.swiper-slide-active img {
-webkit-filter: blur(2px);
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="http://youfit2.stage.64labs.com/assets/images/features/main-feature1.jpg">
</div>
<div class="swiper-slide">
<img src="http://youfit2.stage.64labs.com/assets/images/features/main-feature2.jpg">
</div>
<div class="swiper-slide">
<img src="http://youfit2.stage.64labs.com/assets/images/features/main-feature3.jpg">
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.0.8/js/swiper.jquery.min.js"></script>
<script>
$(function() {
new Swiper ('.swiper-container', {
autoplay: 4000,
autoplayDisableOnInteraction: true,
speed: 1500,
effect: 'slide',
direction: 'horizontal',
loop: true
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment