Home Web Development JavaScript jQuery Slice Image Slider With CSS Animation | Responsive Slice Slider

jQuery Slice Image Slider With CSS Animation | Responsive Slice Slider

April 13, 2020

4517

How we can create a slice type slide using JS or any JS library? Solution: See this jQuery Slice Image Slider With CSS Animation, Responsive Slice Slider.

Previously I have shared different types of image sliders, but this is a slice type slider animation. Basically, a slice slider has a slice type of animation when it changes the image and text. And this effect completely depends on how content hiding and revealing. We can create this kind of slide using jQuery easily.

Today you will learn to create Responsive Slice Slider. Basically, there are some images with heading text on the left side and prev/next navigation on the right side. When you will click on the previous or next then image and text will change with slice effect. The navigation buttons are simple text. This slider has a responsive design, it will fill on small screen width size like on mobile.

So, Today I am sharing jQuery Slice Image Slider With CSS Animation. I have used HTML to create the layout, CSS for styling, and jQuery for functioning. As we know jQuery is a JS library and we use a library to save time and effort. You can use this slider on your website to present your featured content or products.

If you are thinking now how this slice image slider actually is, then see the preview given below.

Preview Of Responsive Slice Slider

See this video preview to getting an idea about how this slider looks like.

Live Demo

Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

jQuery Slice Image Slider Source Code

Before sharing source code, let’s talk about it. First I have created the main tad and created the main section with the class name ‘slides’. Inside the section, I have created a section for navigation buttons and 4 sections for slides images and texts. And all the sections have similar class and ID names. Also in the HTML file, I have linked other files like CSS, JS, and jQuery CDN link.

Now using CSS I have placed all the items in the right place, as you can see in the preview. With CSS first I gave basic values like size, position, margin, padding, etc values to the elements. There I have used flex display command display: flex; to create the layout. For creating animations effects used CSS transition command with special values. There I have used CSS @media query to create a responsive design.

jQuery handling here the navigation and slides functions in this program. There used JS if{} else{} statements to declare values, and other jQuery prebuilt functions. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second file for CSS, and the third file for JavaScript.

Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Slice Slider | Webdevtrick.com</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:700|Space+Mono'>
<link rel="stylesheet" href="style.css">

</head>
<body>

<main>
<section class="slides"> 
  
  <section class="slides-nav">
    <nav class="slides-nav__nav">
      <button class="slides-nav__prev js-prev">Prev</button>
      <button class="slides-nav__next js-next">Next</button>
    </nav>
  </section>

  <section class="slide is-active">
    <div class="slide__content">
      <figure class="slide__figure"><div class="slide__img" style="background-image: url(https://source.unsplash.com/nfTA8pdaq9A/2000x1100)"></div></figure>
      <header class="slide__header">
        <h2 class="slide__title">
          <span class="title-line"><span>Click, Key</span></span>
          <span class="title-line"><span>Or Scroll Fool</span></span>
        </h2>
      </header>
    </div>
  </section>

  <section class="slide">
    <div class="slide__content">
      <figure class="slide__figure"><div class="slide__img" style="background-image: url(https://source.unsplash.com/okmtVMuBzkQ/2000x1100)"></div></figure>
      <header class="slide__header">
        <h2 class="slide__title">
          <span class="title-line"><span>Slide Two</span></span>
          <span class="title-line"><span>Dood Mood</span></span>
        </h2>
      </header>
    </div>
  </section>

  <section class="slide">
    <div class="slide__content">
      <figure class="slide__figure"><div class="slide__img" style="background-image: url(https://source.unsplash.com/WuQME0I_oZA/2000x1100)"></div></figure>
      <header class="slide__header">
        <h2 class="slide__title">
          <span class="title-line"><span>This Right</span></span>
          <span class="title-line"><span>Here Makes Three</span></span>
        </h2>
      </header>
    </div>
  </section>

  <section class="slide">
    <div class="slide__content">
      <figure class="slide__figure"><div class="slide__img" style="background-image: url(https://source.unsplash.com/NsWcRlBT_74/2000x1100)"></div></figure>
      <header class="slide__header">
        <h2 class="slide__title">
          <span class="title-line"><span>How Now</span></span>
          <span class="title-line"><span>Part Four More</span></span>
        </h2>
      </header>
    </div>
  </section>
</section>
</main>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Slice Slider | Webdevtrick.com</title>

</head>

<body>

<main>

</nav>

</section>

<span class="title-line"><span>Click, Key</span></span>

<span class="title-line"><span>Or Scroll Fool</span></span>

</h2>

</header>

</div>

</section>

<span class="title-line"><span>Slide Two</span></span>

</h2>

</header>

</div>

</section>

<span class="title-line"><span>This Right</span></span>

<span class="title-line"><span>Here Makes Three</span></span>

</h2>

</header>

</div>

</section>

</h2>

</header>

</div>

</section>

</main>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
body {
  height: 100%;
  overflow-y: hidden;
}
.slides-nav {
  z-index: 99;
  position: fixed;
  right: -5%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  height: 100%;
  color: #111;
}
@media (min-width: 54em) {
  .slides-nav {
    right: 2%;
  }
}
.slides-nav__nav {
  position: relative;
  right: 0;
  display: block;
  font-size: 1em;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transform-origin: center;
          transform-origin: center;
}
.slides-nav button {
  position: relative;
  display: inline-block;
  padding: 0.35em;
  margin: 0;
  font-family: "Space Mono", monospace;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  overflow-x: hidden;
  -webkit-transition: color 0.5s ease;
  transition: color 0.5s ease;
}
.slides-nav button:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  height: 1px;
  width: 0;
  background: #111;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}
.slides-nav button:hover {
  cursor: pointer;
  color: rgba(17, 17, 17, 0.75);
  -webkit-transition: color 0.5s ease;
  transition: color 0.5s ease;
}
.slides-nav button:hover:after {
  width: 100%;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}
.slides-nav button:focus {
  outline: 0;
}
.is-sliding .slides-nav {
  pointer-events: none;
}

.slides {
  position: relative;
  display: block;
  height: 100vh;
  width: 100%;
  background: #fff;
  -webkit-transition: background 1s cubic-bezier(0.99, 1, 0.92, 1);
  transition: background 1s cubic-bezier(0.99, 1, 0.92, 1);
}
.is-sliding .slides {
  background: #ededed;
  -webkit-transition: background 0.3s cubic-bezier(0.99, 1, 0.92, 1);
  transition: background 0.3s cubic-bezier(0.99, 1, 0.92, 1);
}

.slide {
  z-index: -1;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100vh;
  -webkit-transition: z-index 1s ease;
  transition: z-index 1s ease;
}
.slide.is-active {
  z-index: 19;
  -webkit-transition: z-index 1s ease;
  transition: z-index 1s ease;
}
.slide__content {
  position: relative;
  margin: 0 auto;
  height: 95%;
  width: 95%;
  top: 2.5%;
}
@media (min-width: 54em) {
  .slide__content {
    height: 80%;
    width: 80%;
    top: 10%;
  }
}
.slide__header {
  z-index: 9;
  position: relative;
  height: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  overflow-y: hidden;
  -webkit-transform: translateX(5%);
          transform: translateX(5%);
}
@media (min-width: 54em) {
  .slide__header {
    -webkit-transform: translateX(-5%);
            transform: translateX(-5%);
  }
}
.slide__title {
  font-family: Montserrat, helvetica;
  font-size: 2.5em;
  font-weight: 700;
  color: #111;
  overflow-y: hidden;
}
@media (min-width: 54em) {
  .slide__title {
    font-size: 5em;
  }
}
.slide__title .title-line {
  display: block;
  overflow-y: hidden;
}
.slide__title .title-line span {
  display: inline-block;
  -webkit-transform: translate3d(0, 140%, 0);
          transform: translate3d(0, 140%, 0);
  opacity: 0;
  -webkit-transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
  transition: transform 0.4s ease, opacity 0.8s ease;
  transition: transform 0.4s ease, opacity 0.8s ease, -webkit-transform 0.4s ease;
}
.slide__title .title-line span:nth-child(1) {
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}
.slide__title .title-line span:nth-child(2) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.is-active .slide__title .title-line span {
  -webkit-transform: translate3d(0, 0%, 0);
          transform: translate3d(0, 0%, 0);
  opacity: 1;
  -webkit-transition: opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.is-active .slide__title .title-line:nth-of-type(2n) span {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.slide__figure {
  z-index: 7;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100%;
  width: 100%;
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.is-sliding .slide__figure {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.slide__img {
  position: relative;
  display: block;
  background-size: cover;
  background-attachment: fixed;
  background-position: 50%;
  -webkit-backface-visibility: hidden;
  height: 0%;
  width: 100%;
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
  -webkit-transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), -webkit-filter 0.4s 0.1s ease;
  transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), -webkit-filter 0.4s 0.1s ease;
  transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.4s 0.1s ease;
  transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.4s 0.1s ease, -webkit-filter 0.4s 0.1s ease;
}
.is-active .slide__img {
  height: 100%;
  opacity: 1;
  -webkit-transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), -webkit-filter 0.4s 0.1s ease;
  transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), -webkit-filter 0.4s 0.1s ease;
  transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), filter 0.4s 0.1s ease;
  transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), filter 0.4s 0.1s ease, -webkit-filter 0.4s 0.1s ease;
}
.is-sliding .slide__img {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

/* Code By Webdevtrick ( https://webdevtrick.com ) */

body {

height: 100%;

overflow-y: hidden;

}

.slides-nav {

z-index: 99;

position: fixed;

right: -5%;

display: -webkit-box;

display: flex;

-webkit-box-align: center;

align-items: center;

height: 100%;

color: #111;

}

@media (min-width: 54em) {

.slides-nav {

right: 2%;

}

.slides-nav__nav {

position: relative;

right: 0;

display: block;

font-size: 1em;

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

-webkit-transform-origin: center;

transform-origin: center;

}

.slides-nav button {

position: relative;

display: inline-block;

padding: 0.35em;

margin: 0;

font-family: "Space Mono", monospace;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

background: transparent;

border: 0;

overflow-x: hidden;

-webkit-transition: color 0.5s ease;

transition: color 0.5s ease;

}

.slides-nav button:after {

content: '';

position: absolute;

top: 50%;

left: 0;

height: 1px;

width: 0;

background: #111;

-webkit-transition: width 0.4s ease;

transition: width 0.4s ease;

}

.slides-nav button:hover {

cursor: pointer;

color: rgba(17, 17, 17, 0.75);

-webkit-transition: color 0.5s ease;

transition: color 0.5s ease;

}

.slides-nav button:hover:after {

width: 100%;

-webkit-transition: width 0.4s ease;

transition: width 0.4s ease;

}

.slides-nav button:focus {

outline: 0;

}

.is-sliding .slides-nav {

pointer-events: none;

}

.slides {

position: relative;

display: block;

height: 100vh;

width: 100%;

background: #fff;

-webkit-transition: background 1s cubic-bezier(0.99, 1, 0.92, 1);

transition: background 1s cubic-bezier(0.99, 1, 0.92, 1);

}

.is-sliding .slides {

background: #ededed;

-webkit-transition: background 0.3s cubic-bezier(0.99, 1, 0.92, 1);

transition: background 0.3s cubic-bezier(0.99, 1, 0.92, 1);

}

.slide {

z-index: -1;

padding: 0;

position: absolute;

width: 100%;

height: 100vh;

-webkit-transition: z-index 1s ease;

transition: z-index 1s ease;

}

.slide.is-active {

z-index: 19;

-webkit-transition: z-index 1s ease;

transition: z-index 1s ease;

}

.slide__content {

position: relative;

margin: 0 auto;

height: 95%;

width: 95%;

top: 2.5%;

}

@media (min-width: 54em) {

.slide__content {

height: 80%;

width: 80%;

top: 10%;

}

.slide__header {

z-index: 9;

position: relative;

height: 100%;

display: -webkit-box;

display: flex;

-webkit-box-align: center;

align-items: center;

overflow-y: hidden;

-webkit-transform: translateX(5%);

transform: translateX(5%);

}

@media (min-width: 54em) {

.slide__header {

-webkit-transform: translateX(-5%);

transform: translateX(-5%);

}

.slide__title {

font-family: Montserrat, helvetica;

font-size: 2.5em;

font-weight: 700;

color: #111;

overflow-y: hidden;

}

@media (min-width: 54em) {

.slide__title {

font-size: 5em;

}

.slide__title .title-line {

display: block;

overflow-y: hidden;

}

.slide__title .title-line span {

display: inline-block;

-webkit-transform: translate3d(0, 140%, 0);

transform: translate3d(0, 140%, 0);

opacity: 0;

-webkit-transition: opacity 0.8s ease, -webkit-transform 0.4s ease;

transition: opacity 0.8s ease, -webkit-transform 0.4s ease;

transition: transform 0.4s ease, opacity 0.8s ease;

transition: transform 0.4s ease, opacity 0.8s ease, -webkit-transform 0.4s ease;

}

.slide__title .title-line span:nth-child(1) {

-webkit-transition-delay: 0.15s;

transition-delay: 0.15s;

}

.slide__title .title-line span:nth-child(2) {

-webkit-transition-delay: 0.3s;

transition-delay: 0.3s;

}

.is-active .slide__title .title-line span {

-webkit-transform: translate3d(0, 0%, 0);

transform: translate3d(0, 0%, 0);

opacity: 1;

-webkit-transition: opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);

transition: opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);

transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease;

transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);

}

.is-active .slide__title .title-line:nth-of-type(2n) span {

-webkit-transition-delay: 0.2s;

transition-delay: 0.2s;

}

.slide__figure {

z-index: 7;

position: absolute;

left: 0;

right: 0;

margin: 0 auto;

height: 100%;

width: 100%;

-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);

transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);

transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);

transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);

}

.is-sliding .slide__figure {

-webkit-transform: scale(0.8);

transform: scale(0.8);

-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);

transition: -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);

transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);

transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);

}

.slide__img {

position: relative;

display: block;

background-size: cover;

background-attachment: fixed;

background-position: 50%;

-webkit-backface-visibility: hidden;

height: 0%;

width: 100%;

-webkit-filter: grayscale(0%);

filter: grayscale(0%);

-webkit-transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), -webkit-filter 0.4s 0.1s ease;

transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), -webkit-filter 0.4s 0.1s ease;

transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.4s 0.1s ease;

transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.4s 0.1s ease, -webkit-filter 0.4s 0.1s ease;

}

.is-active .slide__img {

height: 100%;

opacity: 1;

-webkit-transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), -webkit-filter 0.4s 0.1s ease;

transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), -webkit-filter 0.4s 0.1s ease;

transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), filter 0.4s 0.1s ease;

transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), filter 0.4s 0.1s ease, -webkit-filter 0.4s 0.1s ease;

}

.is-sliding .slide__img {

-webkit-filter: grayscale(100%);

filter: grayscale(100%);

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
(function($) {
 
  var SliceSlider = {
    
    /**
     * Settings Object
     */
    settings: {
      delta:              0,
      currentSlideIndex:  0,
      scrollThreshold:    40,
      slides:             $('.slide'),
      numSlides:          $('.slide').length,
      navPrev:            $('.js-prev'),
      navNext:            $('.js-next'),
    },
    
    /**
     * Init
     */
    init: function() {
      s = this.settings;
      this.bindEvents();
    },
    
    /**
     * Bind our click, scroll, key events
     */
    bindEvents: function(){
      
      // Scrollwheel & trackpad
      s.slides.on({
        'DOMMouseScroll mousewheel' : SliceSlider.handleScroll
      });
      // On click prev
      s.navPrev.on({
        'click' : SliceSlider.prevSlide
      });
      // On click next
      s.navNext.on({
        'click' : SliceSlider.nextSlide
      });
      // On Arrow keys
      $(document).keyup(function(e) {
        // Left or back arrows
        if ((e.which === 37) ||  (e.which === 38)){
          SliceSlider.prevSlide();
        }
        // Down or right
        if ((e.which === 39) ||  (e.which === 40)) {
          SliceSlider.nextSlide();
        }
      });
    },
    
    /** 
     * Interept scroll direction
     */
    handleScroll: function(e){

      // Scrolling up
      if (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) { 

        s.delta--;
     
        if ( Math.abs(s.delta) >= s.scrollThreshold) {
          SliceSlider.prevSlide();
        }
      }
 
      // Scrolling Down
      else {
 
        s.delta++;
 
        if (s.delta >= s.scrollThreshold) {
          SliceSlider.nextSlide();
        }
      }
 
      // Prevent page from scrolling
      return false;
    },

    /**
     * Show Slide
     */
    showSlide: function(){ 
      // reset
      s.delta = 0;
      // Bail if we're already sliding
      if ($('body').hasClass('is-sliding')){
        return;
      }
      // Loop through our slides
      s.slides.each(function(i, slide) {

        // Toggle the is-active class to show slide
        $(slide).toggleClass('is-active', (i === s.currentSlideIndex)); 
        $(slide).toggleClass('is-prev', (i === s.currentSlideIndex - 1)); 
        $(slide).toggleClass('is-next', (i === s.currentSlideIndex + 1)); 
        
        // Add and remove is-sliding class
        $('body').addClass('is-sliding');

        setTimeout(function(){
            $('body').removeClass('is-sliding');
        }, 1000);
      });
    },

    /**
     * Previous Slide
     */
    prevSlide: function(){
      
      // If on first slide, loop to last
      if (s.currentSlideIndex <= 0) {
        s.currentSlideIndex = s.numSlides;
      }
      s.currentSlideIndex--;
      
      SliceSlider.showSlide();
    },

    /**
     * Next Slide
     */
    nextSlide: function(){
      
      s.currentSlideIndex++;
   
      // If on last slide, loop to first
      if (s.currentSlideIndex >= s.numSlides) { 
        s.currentSlideIndex = 0;
      }
 
      SliceSlider.showSlide();
    },
  };
  SliceSlider.init();
})(jQuery);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

// Code By Webdevtrick ( https://webdevtrick.com )

(function($) {

var SliceSlider = {

/**

* Settings Object

settings: {

delta: 0,

currentSlideIndex: 0,

scrollThreshold: 40,

slides: $('.slide'),

numSlides: $('.slide').length,

navPrev: $('.js-prev'),

navNext: $('.js-next'),

/**

* Init

init: function() {

s = this.settings;

this.bindEvents();

/**

* Bind our click, scroll, key events

bindEvents: function(){

// Scrollwheel & trackpad

s.slides.on({

'DOMMouseScroll mousewheel' : SliceSlider.handleScroll

});

// On click prev

s.navPrev.on({

'click' : SliceSlider.prevSlide

});

// On click next

s.navNext.on({

'click' : SliceSlider.nextSlide

});

// On Arrow keys

$(document).keyup(function(e) {

// Left or back arrows

if ((e.which === 37) || (e.which === 38)){

SliceSlider.prevSlide();

}

// Down or right

if ((e.which === 39) || (e.which === 40)) {

SliceSlider.nextSlide();

}

});

/**

* Interept scroll direction

handleScroll: function(e){

// Scrolling up

if (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) {

s.delta--;

if ( Math.abs(s.delta) >= s.scrollThreshold) {

SliceSlider.prevSlide();

}

// Scrolling Down

else {

s.delta++;

if (s.delta >= s.scrollThreshold) {

SliceSlider.nextSlide();

}

// Prevent page from scrolling

return false;

/**

* Show Slide

showSlide: function(){

// reset

s.delta = 0;

// Bail if we're already sliding

if ($('body').hasClass('is-sliding')){

return;

}

// Loop through our slides

s.slides.each(function(i, slide) {

// Toggle the is-active class to show slide

$(slide).toggleClass('is-active', (i === s.currentSlideIndex));

$(slide).toggleClass('is-prev', (i === s.currentSlideIndex - 1));

$(slide).toggleClass('is-next', (i === s.currentSlideIndex + 1));

// Add and remove is-sliding class

$('body').addClass('is-sliding');

setTimeout(function(){

$('body').removeClass('is-sliding');

}, 1000);

});

/**

* Previous Slide

prevSlide: function(){

// If on first slide, loop to last

if (s.currentSlideIndex <= 0) {

s.currentSlideIndex = s.numSlides;

}

s.currentSlideIndex--;

SliceSlider.showSlide();

/**

* Next Slide

nextSlide: function(){

s.currentSlideIndex++;

// If on last slide, loop to first

if (s.currentSlideIndex >= s.numSlides) {

s.currentSlideIndex = 0;

}

SliceSlider.showSlide();

};

SliceSlider.init();

})(jQuery);

That’s It. Now you have successfully created jQuery Slice Image Slider With CSS Animation, Responsive Slice Slider. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

jQuery Slice Image Slider With CSS Animation | Responsive Slice Slider

Preview Of Responsive Slice Slider

jQuery Slice Image Slider Source Code

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY