Book Flip 3D Animation Effect- Useful Tips From The Experts

3D Animation Effect
Introduction

This is a custom 3D animated effect for Menu/ catalog/Book/brochure can be kept on the restaurant websites and as a real menu card for displaying the varieties of food available at their place. In Web Design Service this menu card can also be used in other product based websites were the varieties can be displayed as a brochure.

Animation effects

Initially,  we can only see the cover of the folded menu, on click of the ‘view Inside’ option the menu unfolds to three-panel menu card. Simple CSS3/jQuery is used for folding and unfolding of the menu-card. On clicking an item in the unfolded menu, a small description of that item is popped up. A close button is provided to close the pop-up/menu-card.

Feature

  • Browsers compatible
  • Working on touchscreen devices
  • Need not to use any external js, script, and libraries
  • SCSS & CSS both codes are available
  • Easy to use

Below is the code used to implement the concept.

HTML:

<div class="main-container">
  <div id="#main-wraper" class="main-wraper">

    <!-- Menu card -->
    <div class="menu-card">
      <!-- Cover Page -->
      <div class="cover-page">
        <!-- Front Page -->
        <div class="front-page">
          <div class="front-content">
            <div class="food-menu-content">

              <!-- Add Body content -->

              <div class="view-menu">
                <a href="javascript:void(0);" class="open-btn">Look Inside &#8594</a>
              </div>
            </div>
          </div>
        </div>

        <!-- Front back Page -->
        <div class="front-page back-page">

          <!-- Add Body content -->

          <div class="side-overlay"></div>
        </div>
      </div>

      <!-- Middle Page -->
      <div class="middle-page">
        <div class="middle-page-content">
          <div class="middle-wraper">
            <div class="main-course-content">
              <div class="first-row">
                <a href="javascript:void(0);" class="popup">AngularJS Development Services</a>
              </div>
              <div class="first-row">
                <a href="javascript:void(0);">Custom Drupal Module Development</a>
              </div>
            </div>
          </div>
        </div>
        <div class="side-overlay"></div>
      </div>

      <!-- Right Page -->
      <div class="right-page">
        <!-- Right Blank Page -->
        <div class="right-blank-page"></div>

        <!-- Right Front Page -->
        <div class="right-front-page">
          <span class="close-btn"><i class="fa fa-times" aria-hidden="true"></i></span>

          <!-- Add Body content -->

          <div class="side-overlay"></div>
        </div>
      </div>
    </div>
    <!-- Menu card end -->

    <!-- After click content -->
    <div class="after-click-content">
      <div class="inner-content">
        <span class="after-close"><i class="fa fa-times" aria-hidden="true"></i></span>
        <h2>ANGULARJS DEVELOPMENT SERVICES</h2>
        <p>AngularJS is an open source structural framework for web application to create RICH Internet Applications. It predominates the development of dynamic and single page application and supporting MVC to develop client side applications.s</p>
      </div>
    </div><!-- After click end -->
  </div>
</div>

 

CSS:
 
(Get CSS code from  JSFiddle demo)

Javascript:
  // Open btn
  jQuery('.open-btn').click(function() {
    jQuery('.menu-card').addClass('menu-card-shadow');
    jQuery('.cover-page').addClass('cover-in');
    jQuery('.cover-page').removeClass('cover-out');
    jQuery('.right-page').addClass('right-in');
    jQuery('.right-page').removeClass('rigt-out');
    jQuery('.back-page, .right-front-page').addClass('flip-back-page');
  });

  // Close btn
  jQuery('.close-btn').click(function() {
    jQuery('.menu-card').removeClass('menu-card-shadow');
    jQuery('.cover-page').addClass('cover-out');
    jQuery('.cover-page').removeClass('cover-in');
    jQuery('.right-page').addClass('rigt-out');
    jQuery('.right-page').removeClass('right-in');
    jQuery('.back-page, .right-front-page').removeClass('flip-back-page');
    jQuery('.after-click-content').removeClass('after-click');
    jQuery('.menu-card').removeClass('bg-effect');
  });

  // After click on inner link effect
  // Open btn
  jQuery('.popup').click(function() {
    jQuery('.after-click-content').addClass('after-click');
    jQuery('.menu-card').addClass('bg-effect');
  });
  // Close btn
  jQuery('.after-close').click(function() {
    jQuery('.after-click-content').removeClass('after-click');
    jQuery('.menu-card').removeClass('bg-effect');
  });

 

Snapshots of the 3D menu card:

3D menu card cover
3D menu card unfolding
3D menu card unfolded
3D menu card popup (onclick of an item).

Please click here for Demo. Hope this helps you well, feel free to add your comments/feedbacks. Need more assistance regarding Web Design Service Get in touch today!

Advertisements

Custom Next/Prev Thumb For Slick Slider

Next-previos Vivek_June
There are so many different types of jQuery sliders available these days, sliding horizontal panels, transition effects, patch down/up, fade in/out etc… jQuery Image sliders are great for grabbing a visitor’s attention immediately and showing them the key features of your business. jQuery content sliders can be used to elegantly show information about your business without scaring off visitors.

Here, we have discussed  Slick Slider. Most popular and free jQuery slider with lots of functions and callbacks. This will be the first choice for all frontend developers when they need some slider functions for web design service.

We have used here the features of a slick slider and added custom next/prev thumbs for NEXT and PREVIOUS images. A previous/next button is added for changing the slide. Other than that we have added below the slide image a small image thumb which can be used as the previous/next button. The image thumb contains the image present in the previous/next position. This feature helps to get rid of sliding throughout the slider to view the required slider. For responsive web design service, a small description of the slide that is active is also given it. We have used simple Html, CSS and Javascript code along with slick-slider plugins.

Note: Do not forget to include slick.css, slick-theme.css, and slick.js files other than below code.

HTML:
<section class="slideshow__slides slider">
    <div class="slider-image">
      <div class="image-wrap">
        <img src="images/img1.jpg" />
      </div>
      <div class="slider-caption-wrap">
        <div class="caption-details">
          <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.</span>
        </div>
      </div>
    </div>
    <div class="slider-image">
      <div class="image-wrap">
        <img src="images/img2.jpg" />
      </div>
      <div class="slider-caption-wrap">
        <div class="caption-details">
          <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.</span>
        </div>
      </div>
    </div>
    <div class="slider-image">
      <div class="image-wrap">
        <img src="images/img3.jpg" />
      </div>
      <div class="slider-caption-wrap">
        <div class="caption-details">
          <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.</span>
        </div>
      </div>
    </div>
    <div class="slider-image">
      <div class="image-wrap">
        <img src="images/img4.jpg" />
      </div>
      <div class="slider-caption-wrap">
        <div class="caption-details">
          <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.</span>
        </div>
      </div>
    </div>
    <div class="slider-image">
      <div class="image-wrap">
        <img src="images/img5.jpg" />
      </div>
      <div class="slider-caption-wrap">
        <div class="caption-details">
          <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua.</span>
        </div>
      </div>
    </div>
  </section>

 

CSS:
/* Slick slider Design */
.slider {
  position: relative;
  max-width: 850px;
  width: 100%;
  margin: 0 auto;
}
.slick-slide img {
  width: 100%;
}
/* Slider Caption Design */
.slider-image {
  position: relative;
}
.slider-image .slider-caption-wrap {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  display: inline-block;
  width: 100%;
  background-color: rgba(0, 0, 0, .5);
  color: #FFF;
  vertical-align: top;
}
.slider-image .slider-caption-wrap .caption-details {
  display: block;
  height: 100px;
  width: -webkit-calc(100% - 430px);
  width: -moz-calc(100% - 430px);
  width: -ms-calc(100% - 430px);
  width: calc(100% - 430px);
  margin: 0 auto;
  padding: 10px 0;
  overflow: auto;
  font-size: 16px;
  line-height: 1.4;
}
/* Slider thumbnails and Slider Nav Design */
.slick-thumb-nav img {
  width: 200px;
}
.slick-arrow {
  top: auto;
  bottom: 0;
  z-index: 9;
  display: inline-block;
  height: auto;
  width: auto;
  margin-bottom: 0;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}
.slick-arrow.slick-prev {
  left: 0;
}
.slick-arrow.slick-next {
  right: 0;
}
.slick-arrow:before { display: none; }
.slick-arrow .arrow-icon {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50px;
  background-color: rgba(0, 0, 0, .5);
  color: #FFF;
  font-size: 55px;
  opacity: 0;
  -webkit-transition: .5s all ease 0s;
  -moz-transition: .5s all ease 0s;
  -ms-transition: .5s all ease 0s;
  transition: .5s all ease 0s;
}
.slideshow__slides:hover .slick-arrow .arrow-icon {
  opacity: 1;
}
.slick-arrow .arrow-icon span {
  display: inline-block;
  padding: 50px 0;
  font-size: 55px;
}
.slick-arrow .arrow-icon.prev-slick-arrow {
  left: 0;
}
.slick-arrow .arrow-icon.next-slick-arrow {
  right: 0;
}
/* Slider dot design */
.slick-dots li button:before {
  font-size: 16px;
}

/**
 * Responsive design
 */
@media (max-width: 992px) {
  /* Slider Nav Design */
  .slick-arrow .arrow-icon { display: none; }
}
@media (max-width: 640px) {
  /* Slider thumbnails Design */
  .slick-thumb-nav img {
    width: 120px;
  }
  /* Slider Caption Design */
  .slider-image .slider-caption-wrap .caption-details {
    height: 60px;
    width: -webkit-calc(100% - 260px);
    width: -moz-calc(100% - 260px);
    width: -ms-calc(100% - 260px);
    width: calc(100% - 260px);
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  /* Slider thumbnails Design */
  .slick-thumb-nav img {
    width: 85px;
  }
  .slick-arrow .slick-thumb-nav {
    margin-bottom: 0;
  }
  .slick-prev .slick-thumb-nav {
    margin-left: 0;
  }
  .slick-next .slick-thumb-nav {
    margin-right: 0;
  }
  /* Slider Caption Design */
  .slider-image .slider-caption-wrap {
    position: relative;
    bottom: auto;
  }
  .slider-image .slider-caption-wrap .caption-details {
    height: 43px;
    width: -webkit-calc(100% - 185px);
    width: -moz-calc(100% - 185px);
    width: -ms-calc(100% - 185px);
    width: calc(100% - 185px);
    padding: 3px 0;
    font-size: 12px;
  }
}
@media (max-width: 380px) {
  /* Slider dot design */
  .slick-dots li { margin: 0; }
  .slick-dots li button:before {
    font-size: 12px;
  }
}

 

Javascript:
(function ($) {
  $(function() {

    // Slick slider for prev/next thumbnails images
    $('.slideshow__slides').slick({
      dots: true,
      slidesToShow: 1,
      autoplay: false
    });
    setTimeout(function() {
      $('.slick-prev').prepend('
'
); $('.slick-next').append('
>
'
); get_prev_slick_img(); get_next_slick_img(); }, 500); $('.slideshow__slides').on('click', '.slick-prev', function() { get_prev_slick_img(); }); $('.slideshow__slides').on('click', '.slick-next', function() { get_next_slick_img(); }); $('.slideshow__slides').on('swipe', function(event, slick, direction) { if (direction == 'left') { get_prev_slick_img(); } else { get_next_slick_img(); } }); $('.slick-dots').on('click', 'li button', function() { var li_no = $(this).parent('li').index(); if ($(this).parent('li').index() > li_no) { get_prev_slick_img() } else { get_next_slick_img() } }); function get_prev_slick_img() { // For prev img var prev_slick_img = $('.slick-current').prev('.slider-image').find('img').attr('src'); $('.prev-slick-img img').attr('src', prev_slick_img); $('.prev-slick-img').css('background-image', 'url(' + prev_slick_img + ')'); // For next img var prev_next_slick_img = $('.slick-current').next('.slider-image').find('img').attr('src'); $('.next-slick-img img').attr('src', prev_next_slick_img); $('.next-slick-img').css('background-image', 'url(' + prev_next_slick_img + ')'); } function get_next_slick_img() { // For next img var next_slick_img = $('.slick-current').next('.slider-image').find('img').attr('src'); $('.next-slick-img img').attr('src', next_slick_img); $('.next-slick-img').css('background-image', 'url(' + next_slick_img + ')'); // For prev img var next_prev_slick_img = $('.slick-current').prev('.slider-image').find('img').attr('src'); $('.prev-slick-img img').attr('src', next_prev_slick_img); $('.prev-slick-img').css('background-image', 'url(' + next_prev_slick_img + ')'); } // End }) })(jQuery);

 

Hope this solution would have helped you out for finding a quicker solution. 

Article Source: AddWeb Solution 

3D Animated Hover Effect Of Thumbnails Images

new-blog-addweb_2
This is a custom 3D animated effects for thumbnails images, grid box & card rotate design.
You can use below code for 3D Animation hover effect of images without using any jQuery code and JS libraries.
Feature
  • Browser compatible css
  • Responsive for mobile & i-pad
  • Need not to use any external js, script and libraries
  • SCSS & CSS both codes are available
  • Easy to use
How To Create a 3D Animation hover Effect of Thumbnails Images
Step 1: Manage HTML structure
HTML: Please use below HTML code
<div class="aws-image-thumbnail">
     <a href="#"></a>
      <span>Addweb Solution</span>
 </div>
Step 2: Use below SCSS code
SASS:
.aws-image-thumbnail {
  display: inline-block;
  float: left;
  height: 200px;
  width: 400px;
  margin: 0 0 100px;
  text-align: center;
  -webkit-perspective: 500px;
       -moz-perspective: 500px;
            perspective: 500px;
  span {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    padding-top: 5px;
    color: $white;
    font-size: 20px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: rotateX(-80deg) scale(.9);
       -moz-transform: rotateX(-80deg) scale(.9);
            transform: rotateX(-80deg) scale(.9);
    -webkit-transition: all .5s ease 0s;
       -moz-transition: all .5s ease 0s;
            transition: all .5s ease 0s;
  }
  a {
    position: relative;
    display: inline-block;
    height: 200px;
    width: 100%;
    background:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('../images/img6.jpg');
    background-size: 0, cover;
    background-repeat: no-repeat;
    text-decoration: none;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transition: all .5s;
         -moz-transition: all .5s;
              transition: all .5s;
    &:after {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 36px;
      width: 100%;
      background: inherit;
      background-size: cover, cover;
      background-position: bottom;
      -webkit-transform: rotateX(90deg);
         -moz-transform: rotateX(90deg);
              transform: rotateX(90deg);
      -webkit-transform-origin: bottom;
         -moz-transform-origin: bottom;
              transform-origin: bottom;
      content: '';
    }
    &:before {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
      -webkit-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
         -moz-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
              box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
      -webkit-transition: all 0.5s;
         -moz-transition: all 0.5s;
              transition: all 0.5s;
      opacity: 0.15;
      -webkit-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
         -moz-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
              transform: rotateX(95deg) translateZ(-80px) scale(0.75);
      -webkit-transform-origin: bottom;
         -moz-transform-origin: bottom;
              transform-origin: bottom;
      content: '';
    }
  }
  &:hover {
    a {
     -webkit-transform: rotateX(79deg);
        -moz-transform: rotateX(79deg);
             transform: rotateX(79deg);
     -webkit-transform-origin: bottom;
        -moz-transform-origin: bottom;
             transform-origin: bottom;
     &:after {
       display: inline-block;
       color: $white;
       -webkit-transform: rotateX(99deg);
          -moz-transform: rotateX(99deg);
               transform: rotateX(99deg);
       transform-origin: bottom;
     }
     &:before {
     -webkit-box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
             box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
     opacity: 1;
     -webkit-transform: rotateX(0) translateZ(-60px) scale(0.85);
        -moz-transform: rotateX(0) translateZ(-60px) scale(0.85);
             transform: rotateX(0) translateZ(-60px) scale(0.85);
     }
    }
    span {
     visibility: visible;
     opacity: 1;
     -webkit-transform: rotateX(0) scale(1.2);
        -moz-transform: rotateX(0) scale(1.2);
             transform: rotateX(0) scale(1.2);
     -webkit-transition: all .8s;
      -moz-transition: all .8s;
           transition: all .8s;
    }
  }
}
CSS:
.aws-image-thumbnail {
    display: inline-block;
    float: left;
    height: 200px;
    width: 400px;
    margin: 0 0 100px;
    text-align: center;
    -webkit-perspective: 500px;
       -moz-perspective: 500px;
         perspective: 500px;
  }
  .aws-image-thumbnail span {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    padding-top: 5px;
    color: #FFF;
    font-size: 20px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: rotateX(-80deg) scale(0.9);
       -moz-transform: rotateX(-80deg) scale(0.9);
                transform: rotateX(-80deg) scale(0.9);
    -webkit-transition: all .5s ease 0s;
       -moz-transition: all .5s ease 0s;
                transition: all .5s ease 0s;
  }
  .aws-image-thumbnail a {
    position: relative;
    display: inline-block;
    height: 200px;
    width: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../images/img6.jpg");    background-size: 0, cover;
    background-repeat: no-repeat;
    text-decoration: none;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
               transform-style: preserve-3d;
    -webkit-transition: all .5s;
       -moz-transition: all .5s;
               transition: all .5s;
  }
  .aws-image-thumbnail a:after {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 36px;
    width: 100%;
    background: inherit;
    background-size: cover, cover;
    background-position: bottom;
    -webkit-transform: rotateX(90deg);
       -moz-transform: rotateX(90deg);
                transform: rotateX(90deg);
    -webkit-transform-origin: bottom;
       -moz-transform-origin: bottom;
                transform-origin: bottom;
    content: '';
  }
  .aws-image-thumbnail a:before {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
                box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
    -webkit-transition: all 0.5s;
       -moz-transition: all 0.5s;
                transition: all 0.5s;
    opacity: 0.15;
    -webkit-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
       -moz-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
                transform: rotateX(95deg) translateZ(-80px) scale(0.75);
    -webkit-transform-origin: bottom;
       -moz-transform-origin: bottom;
                transform-origin: bottom;
    content: '';
  }
  .aws-image-thumbnail:hover a {
    -webkit-transform: rotateX(79deg);
       -moz-transform: rotateX(79deg);
                transform: rotateX(79deg);
    -webkit-transform-origin: bottom;
       -moz-transform-origin: bottom;
                transform-origin: bottom;
  }
  .aws-image-thumbnail:hover a:after {
    display: inline-block;
    color: #FFF;
    -webkit-transform: rotateX(99deg);
       -moz-transform: rotateX(99deg);
               transform: rotateX(99deg);
    transform-origin: bottom;
  }
  .aws-image-thumbnail:hover a:before {
    -webkit-box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
            box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
    opacity: 1;
    -webkit-transform: rotateX(0) translateZ(-60px) scale(0.85);
       -moz-transform: rotateX(0) translateZ(-60px) scale(0.85);
                transform: rotateX(0) translateZ(-60px) scale(0.85);
  }
  .aws-image-thumbnail:hover span {
    visibility: visible;
    opacity: 1;
    -webkit-transform: rotateX(0) scale(1.2);
       -moz-transform: rotateX(0) scale(1.2);
                transform: rotateX(0) scale(1.2);
    -webkit-transition: all .8s;
       -moz-transition: all .8s;
    transition: all .8s;
  }
Hope this helps you to make things work..!!! Need more assistance regarding Web design service…! Feel free to leave your valuable feedback and stay tuned for more similar blogs.

Create Sliders To Move In Opposite Direction With Each Other

This is a custom animated slider with left & right offset slide effect. Animated effect like opening/closing door effects.
This slider can be used in testimonial, display 2 items in a slide, simple content & image slider and more.
Feature
  • Support in responsive view, tablet & mobile views
  • Support fluid responsive width
  • Content & images can slide
  • Compatible with IE 9 and higher
  • No need to add other dependences of CSS/JS
  • jQuery library: 1.4 and higher
  • Easy to use
HTML: Please use below HTML code:
<div class="aws-slider">
  <div class="aws-controls">
    <a class="aws-prev-link hide-arrow" href="javascript:void();"> 
        <img src="image-path"> <!-- prev icon -->
     </a>
    <a class="aws-next-link" href="javascript:void();”>
        <img src="image-path"> <!-- Next icon -->
    </a>
  </div> <!-- /.aws-controls -->
  <div class="aws-grid">
    <!-- Slide content wrapper div -->
    <div class="aws-row aws-row-1">
      <div class="aws-col aws-col-1">
        <div class="aws-content">
          <div class="aws-title">Title</div>
          <div class="aws-body">Informative text</div>
        </div>
      </div> <!-- /.aws-col -->
      <div class="aws-col aws-col-2">
        <div class="aws-content">
          <div class="aws-title">Title</div>
          <div class="aws-body">Informative text</div>
        </div> 
      </div> <!-- /.aws-col -->
    </div> <!-- /.aws-row -->
    ...
    ...
  </div> <!-- /.aws-grid -->
</div> <!-- /.aws-slider -->
JS: Use below code for animation effect for desktop and mobile device.
jQuery(document).ready(function() {
  var window_width = jQuery(window).width();

  jQuery('.aws-controls .aws-prev-link').addClass('hide-arrow');
  
  // Animate slide for Desktop & Mobile
  slider_desktop ();
  slider_mobile ();

  jQuery(window).resize(function() {
    window_width = jQuery(window).width();
    if (window_width > 767) {
      jQuery('.aws-slider .aws-row.active .aws-col').removeClass('active');

      // Resize
      jQuery('.aws-slider').css('height', 'auto');
      jQuery('.aws-slider .aws-row .aws-col').css('height', 'auto');
      var aws_col_h_max = 0;
      jQuery('.aws-slider .aws-row').each(function() {
        var awscolHeight = jQuery(this).outerHeight();
        if (awscolHeight > aws_col_h_max) {
          aws_col_h_max = awscolHeight;
        }
      });
      jQuery('.aws-slider').css('height', aws_col_h_max);
      jQuery('.aws-slider .aws-row .aws-col').css('height', aws_col_h_max);
      // Resize End
    }
    else if (window_width < 768) {
      //slider_mobile (window_width);
      jQuery('.aws-slider .aws-row.active .aws-col-1').addClass('active');

      // Resize
      jQuery('.aws-slider').css('height', 'auto');
      jQuery('.aws-slider .aws-row .aws-col').css('height', 'auto');
      var aws_col_h_max = 0;
      jQuery('.aws-slider .aws-row').each(function() {
        var awscolHeight = jQuery(this).children('.aws-col').outerHeight();
        if (awscolHeight > aws_col_h_max) {
          aws_col_h_max = awscolHeight;
        }
      });
      jQuery('.aws-slider').css('height', aws_col_h_max);
      jQuery('.aws-slider .aws-row .aws-col').css('height', aws_col_h_max);
      // Resize End
    }
  });
  // End

  // Set height for Col FOR DESKTOP
  if (jQuery(window).width() > 767) {
    var aws_col_h_max = 0;
    jQuery('.aws-slider .aws-row').each(function() {
      var awscolHeight = jQuery(this).outerHeight();
      if (awscolHeight > aws_col_h_max) {
        aws_col_h_max = awscolHeight;
      }
    });
    jQuery('.aws-slider').css('height', aws_col_h_max);
    jQuery('.aws-slider .aws-row .aws-col').css('height', aws_col_h_max);
  }

  // Set height for Col FOR MOBILE
  if (window_width < 768) {
    var aws_col_h_max = 0;
    jQuery('.aws-slider .aws-row').each(function() {
      var awscolHeight = jQuery(this).children('.aws-col').outerHeight();
      if (awscolHeight > aws_col_h_max) {
        aws_col_h_max = awscolHeight;
      }
    });
    jQuery('.aws-slider').css('height', aws_col_h_max);
    jQuery('.aws-slider .aws-row .aws-col').css('height', aws_col_h_max);
  }
});

// For Desktop
function slider_desktop () {
  jQuery('.aws-slider .aws-row:nth-child(1)').addClass('active');
  // For Prev
  jQuery('.aws-controls .aws-prev-link').click(function() {
    window_width = jQuery(window).width();
    if (window_width > 767) {
      if (jQuery('.aws-slider .aws-row.active').is(':first-child')) {
        // To detect first row
      }
      else if (jQuery('.aws-slider .aws-row:nth-child(2)').hasClass('active')) {
        jQuery('.aws-controls .aws-prev-link').addClass('hide-arrow');
        jQuery('.aws-slider .aws-row.active').removeClass('active').prev().addClass('active');
      }
      else {
        jQuery('.aws-controls .aws-prev-link').removeClass('hide-arrow');
        jQuery('.aws-controls .aws-next-link').removeClass('hide-arrow');
        jQuery('.aws-slider .aws-row.active').removeClass('active').prev().addClass('active');
      }
    }
  });
  // For Next
  jQuery('.aws-controls .aws-next-link').click(function() {
    window_width = jQuery(window).width();
    if (window_width > 767) {
      if (jQuery('.aws-slider .aws-row:nth-last-child(1)').hasClass('active')) {
        // To detect last row
      }
      else if (jQuery('.aws-slider .aws-row:nth-last-child(2)').hasClass('active')) {
        jQuery('.aws-controls .aws-next-link').addClass('hide-arrow');
        jQuery('.aws-slider .aws-row.active').removeClass('active').next().addClass('active');
      }
      else {
        jQuery('.aws-controls .aws-prev-link').removeClass('hide-arrow');
        jQuery('.aws-slider .aws-row.active').removeClass('active').next().addClass('active');
      }
    }
  });
}
// For Mobile
function slider_mobile () {
  jQuery('.aws-slider .aws-row:nth-child(1)').addClass('active');
  jQuery('.aws-slider .aws-row:nth-child(1) .aws-col-1').addClass('active');
  // For Prev
  jQuery('.aws-controls .aws-prev-link').click(function() {
    window_width = jQuery(window).width();
    if (window_width < 768) {
      jQuery('.aws-controls .aws-next-link').removeClass('hide-arrow');
      if (jQuery('.aws-slider .aws-row .aws-col-2.active').hasClass('active')) {
        jQuery('.aws-slider .aws-row .aws-col.active').removeClass('active').prev().addClass('active');
        if (jQuery('.aws-slider .aws-row:first-child').hasClass('active')) {
          jQuery('.aws-controls .aws-prev-link').addClass('hide-arrow');
        }
      }
      else if (jQuery('.aws-slider .aws-row .aws-col-1.active').hasClass('active')) {
        if (jQuery('.aws-slider .aws-row:first-child').hasClass('active')) {
          jQuery('.aws-slider .aws-row:first-child').addClass('active');
        }
        else {
          jQuery('.aws-slider .aws-row .aws-col.active').parent('.aws-row').removeClass('active').prev().addClass('active');
          jQuery('.aws-slider .aws-row .aws-col').removeClass('active');
          jQuery('.aws-slider .aws-row.active .aws-col-2').addClass('active');
        }
      }
    }
  });
  // For Next
  jQuery('.aws-controls .aws-next-link').click(function() {
    window_width = jQuery(window).width();
    if (window_width < 768) {
      if (jQuery('.aws-slider .aws-row .aws-col-1.active').hasClass('active')) {
        if(jQuery('.aws-slider .aws-row:last-child .aws-col').length == '2' && jQuery('.aws-slider .aws-row:last-child').hasClass('active')) {
          jQuery('.aws-controls .aws-next-link').addClass('hide-arrow');
        }
        if (jQuery('.aws-slider .aws-row.active .aws-col-2').length) {
          jQuery('.aws-controls .aws-prev-link').removeClass('hide-arrow');
          jQuery('.aws-slider .aws-row .aws-col.active').removeClass('active').next().addClass('active');
        }
      }
      else if (jQuery('.aws-slider .aws-row .aws-col-2.active').hasClass('active')) {
        if (jQuery('.aws-slider .aws-row:last-child .aws-col').length == '1' && jQuery('.aws-slider .aws-row:nth-last-child(2)').hasClass('active')) {
          jQuery('.aws-controls .aws-next-link').addClass('hide-arrow');
        }
        if (jQuery('.aws-slider .aws-row:last-child').hasClass('active')) {
          // To detect last row
        }
        else {
          jQuery('.aws-slider .aws-row .aws-col.active').parent('.aws-row').removeClass('active').next().addClass('active');
          jQuery('.aws-slider .aws-row .aws-col').removeClass('active');
          jQuery('.aws-slider .aws-row.active .aws-col-1').addClass('active');
        }
      }
    }
  });
}
CSS:
.aws-slider .aws-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99;
  margin: 0 0 0 -30px;
}
.aws-slider .aws-controls a {
  display: inline-block;
  height: 23px;
  width: 30px;
  text-align: center;
}
.aws-slider .aws-controls a.hide-arrow {
  opacity: .3;
}
@media (max-width: 767px) {
  .aws-slider .aws-controls {
    right: 0;
    left: 0;
    width: -webkit-calc('100% - 30px');
    width: -moz-calc('100% - 30px');
    width: calc('100% - 30px');
    margin: 0 15px;
  }
  .aws-slider .aws-controls a.aws-next-link {
    float: right;
  }
}

 

Hope this helped you a lot, feel free to share your feedbacks, Need more assistance regarding Quality Web Design Services Contact us now.
If you want to know how 3D Animation hover effect of images done without using any jQuery code and JS libraries click here