3d Slider converting to rmmPosts

3d-slider-converting-to-rmmposts.markdown

3d Slider converting to rmmPosts

A Pen by Ryan Mitchell on CodePen.

License.

index.html

<div id="rmm-getposts-wrapper"> 
  <div class="inner"> 
    <ul id="rmm-getposts">

      <div class="item" data-class="1" data-position="1">
        <div class="item-content-wrapper">
          
          <h2>Slide 1</h2>
          <p> This is Slide 1 </p>
        
        </div>
      
      </div>

      <div class="item" data-class="2" data-position="2">
        <div class="item-content-wrapper">
          
          <h2>Slide 2</h2>
          <p> This is Slide 2 </p>
         
        </div>
      
      </div>

      <div class="item" data-class="3" data-position="3">
        <div class="item-content-wrapper">
          
          <h2>Slide 3</h2>
          <p> This is Slide 3 </p>
        
        </div>
       
      </div>

      <div class="item" data-class="4" data-position="4">
        <div class="item-content-wrapper">
          
          <h2>Slide 4</h2>
          <p> This is Slide 4 </p>
       
        </div>
       
      </div>
    </ul>
    

   </div>
</div>   


 <div class="slider_controls">
    <span id="next">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
        <defs>
          <style>
            .cls-1 {
              fill: none;
              stroke: #fa8c8c;
              stroke-miterlimit: 10;
              stroke-width: 7px;
            }
          </style>
        </defs>
        <path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
      </svg>
    </span>

    <span id="prev">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
        <defs>
          <style>
            .cls-1 {
              fill: none;
              stroke: #fa8c8c;
              stroke-miterlimit: 10;
              stroke-width: 7px;
            }
          </style>
        </defs>
        <path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
      </svg>
    </span>
</div> <!--  end slider_controls -->



    <ul id="pager">
      <li data-class="1" class="active"></li>
      <li data-class="2"></li>
      <li data-class="3"></li>
      <li data-class="4"></li>
    </ul>

script.js

jQuery(document).ready(function(){

function detect_active(){
    // get active
    var get_active = $("#rmm-getposts .item:first-child").data("class");
    $("#pager li").removeClass("active");
    $("#pager li[data-class="+ get_active +"]").addClass("active");
  }
  $("#next").click(function(){
    var total = $(".item").length;
    $("#rmm-getposts .item:first-child").hide().appendTo("#rmm-getposts").fadeIn();
    $.each($('.item'), function (index, item) {
      $(item).attr('data-position', index + 1);
    });
    detect_active();

  });

  $("#prev").click(function(){
    var total = $(".item").length;
    $("#rmm-getposts .item:last-child").hide().prependTo("#rmm-getposts").fadeIn();
    $.each($('.item'), function (index, item) {
      $(item).attr('data-position', index + 1);
    });

    detect_active();
  });

  $("#pager li").click(function(){
    $("#pager li").removeClass("active");
    $(this).addClass("active");
    var get_slide = $(this).attr('data-class');
    console.log(get_slide);
    $("#rmm-getposts .item[data-class=" + get_slide + "]").hide().prependTo("#rmm-getposts").fadeIn();
    $.each($('.item'), function (index, item) {
      $(item).attr('data-position', index + 1);
    });
  });


  $("body").on("click", "#rmm-getposts .item:not(:first-child)", function(){
    var get_slide = $(this).attr('data-class');
    console.log(get_slide);
    $("#rmm-getposts .item[data-class=" + get_slide + "]").hide().prependTo("#rmm-getposts").fadeIn();
    $.each($('.item'), function (index, item) {
      $(item).attr('data-position', index + 1);
    });

    detect_active();
  });
});

scripts

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

style.scss

body {
  background-color: #ccc;
}

#rmm-getposts-wrapper {

  .inner {
    margin: 0 auto;
    position: relative;
    perspective: 1000px;
    height: 100%;

      #rmm-getposts {  //main slide name
        padding-left: 0;
        height: 738px;

        .item {

          position: absolute;
          transition: transform 1.2s;
          display: flex;
          align-items: center;
          background: gray;
          overflow: hidden;
          border: 5px solid #000;
          width: 85%;

          // Positioning

          &:first-child {
            z-index: 10 !important;
            transform: rotateY(0deg) translateX(0px) !important;
          }

          &[data-position="2"] {
            z-index: 9;
            transform: rotateY(0deg) translateX(10%) scale(0.9);
          }
          
          &[data-position="3"] {
            z-index: 8;
            transform: rotateY(0deg) translateX(20%) scale(0.8);
          }
          
          &[data-position="4"] {
            z-index: 7;
            transform: rotateY(0deg) translateX(30%) scale(0.7);
          }



          &:hover {
            &:not(:first-child) {
              cursor: pointer;
            }
          }

          .item-content-wrapper {
            padding: 1em;
            display: inline-block;
            width: 100%;
          } /* End of #dp-content */


        } /* End of #dp-item */

      } /* End of #dp-slider */

    } /* End of .inner */
} /* End of .****-wrapper */


.slider_controls {
  background-color: yellow;
  
  #next,  #prev {
  position: absolute;
  top: 50%;
  right: 16%;
  height: 33px;
  width: 33px;
  z-index: 10;
  cursor: pointer;
}

#prev {
  left: 15px;
  transform: rotate(180deg);
}

  
  
} /* End of .slider-controls */



#pager {
  position: absolute;
  bottom: 25px;
  z-index: 12;
  left: 38%;
  cursor: default;
  
  li {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: #fff;
  border-radius: 50%;
    
   &.active {
     background: #FA8C8C;
    }
    
   &:hover {
    cursor: pointer;
    background: #FA8C8C;
    transition: background .3s;
      }
  }
} /* End of #pager */