VueJs Image Carousels Sliders with Demo

Today, We want to share with you VueJs Image Carousels Sliders with Demo.In this post we will show you vue vertical carousel, hear for Vue.s image slider component example we will give you demo and example for implement.In this post, we will learn about Image Slider Component Example using Vue.js with an example.

VueJs Image Carousels Sliders with Demo

There are the Following The simple About VueJs Image Carousels Sliders with Demo Full Information With Example and source code.

As I will cover this Post with live Working example to develop vue carousel tutorial, so the vue carousel cdn for this example is following below.

Slider – Vue.js Examples

HTML Part

<div id="slider">
        <div id="text" class="textc"></div>
        <div class="box" id="cube">
        <div class='slide-image'> 
        <div id="image1_4" class='front face'>
            <!--<img src='http://placehold.it/180x180/' alt=''> -->
            <p>This is front face</p>
            <img class="image-slide" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/rock.jpg">
        </div>
        <div id="image2_4" class="right face">
            <p>This is right face</p>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/grooves.jpg">
        </div>
        <div id="image3_4" class="back face">
            <p>This is back face</p>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/arch.jpg">
        </div>
        <div id="image4_4" class="left face">
            <p>This is left face</p>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/5689/sunset.jpg">
        </div>

        </div>
            </div>

    </div>

main.js

var text = document.getElementById('text');
var cube = document.getElementById('cube');
text.innerHTML = "lllllll";
var rotateAngle = 0;

var left = $("#cube").position().left;
var right =  left + $("#image1_4").width();    
var top = $("#cube").position().top;
var bottom = top + $("#image1_4").height();

var maxTime = 1000,
    maxDistance = 50,
    target = $('.front, .right'),
    startX = 0,
    startZ = 0,
    startTime = 0,
    rotation = false,
    touch = "ontouchend" in document,
    startEvent = (touch) ? 'touchstart' : 'mousedown',
    moveEvent = (touch) ? 'touchmove' : 'mousemove',
    endEvent = (touch) ? 'touchend' : 'mouseup';


document.addEventListener(startEvent, onTouchStart);
document.addEventListener(moveEvent, onTouchMove);
document.addEventListener(endEvent, onTouchEnd);

function onTouchStart(e) {
        e.preventDefault();
    
    if (left){
           text.innerHTML = "TEXT width present " + left;
    }else{
                  text.innerHTML = "TEXT width NOT present" ;
    }
    startTime = e.timeStamp;
       
    startX = (e && e.touches) ? e.touches[0].pageX : e.pageX;
    startY = (e && e.touches) ? e.touches[0].pageY : e.pageY;
    if (startX > left && startX  top && startY  0) {
        currentDistance = Math.abs(currentX - startX);
    } 

    if (rotation && startTime !== 0 && currentTime - startTime  maxDistance) {
        if (currentX  startX) {
            rotateAngle = rotateAngle + 90;
            $("#cube").css("-webkit-transform", "rotateY(" + rotateAngle + "deg)");
            $("#cube").css("-moz-transform", "rotateY(" + rotateAngle + "deg)");
        }

        startTime = 0;
        startX = 0;

    }

}

function onTouchEnd(e) {
    text.innerHTML = "On";
    startTime = 0;
    startX = 0;
}

style.css

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px;
    color: #393939;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

#slider {
  max-width: 600px;
  text-align: center;
  margin: 0 auto;
}

#overflow {
  width: 100%;
  overflow: hidden;
}

#slides .inner {
  width: 100%;
}

#slides .right{
    -webkit-transform: rotateY(  90deg );
}


#slides .inner {
    /*-webkit-perspective-origin: 50% 50% 50%;
     */ -webkit-transform-style: preserve-3d;
    /*
  -webkit-transform: translateZ(300px);
  -moz-transform: translateZ(0);
  -o-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
*/
  -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

#slides article {
  width: 25%;
  float: left;
}

#panel-1:checked ~ .box {
   -webkit-transform: rotateY( 0deg );
}

#panel-2:checked ~ .box {
  -webkit-transform: rotateY( -90deg );
}

#panel-3:checked ~ .box {
  -webkit-transform: rotateY( -180deg );
}

#panel-4:checked ~ .box {
  -webkit-transform: rotateY( -270deg );
}

input[type="radio"] {
  display: none;
}

label {
  background: #CCC;
  display: inline-block;
  cursor: pointer;
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

#panel-1:checked ~ label[for="panel-1"],
#panel-2:checked ~ label[for="panel-2"],
#panel-3:checked ~ label[for="panel-3"],
#panel-4:checked ~ label[for="panel-4"] {
  background: #333;
}

img {
    max-width: 100%;
    height: auto;
}

.box {
    width: 500px;
    height: 500px;
    position: relative;
    
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    
    -webkit-transition: all 3s ease-out;
    -moz-transition: all 3s ease-out;
    -webkit-transform-origin: 250px 250px -250px;
    -moz-transform-origin: 250px 250px -250px;
    
    margin: 30px auto;
    
}


.face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: visible; 
    -moz-backface-visibility: visible; 
    
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}
p{
    font-size: 20px;
}
#text{
    display: none;
}

.front {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    
    z-index: 1;
    background: #d9d9d9;
}

.right {
    background: #9dcc78;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);   
    z-index: 1;
    left: 100%; 
}

.back {
    background: #0000ff;
    -webkit-transform: rotateY(180deg) translateZ( 500px );
    -moz-transform: rotateY(180deg) translateZ( 500px );
    
    z-index: 1;
     left: 100%;
    
}

.left {
    background: #ff0000;
    -webkit-transform: rotateY(-90deg) translateX( -500px);
    -moz-transform: rotateY(-90deg) translateX( -500px);
    
    z-index: 1;
     
}


.ms-touch.slider {
  overflow-x: scroll;
  overflow-y: hidden;
  
  -ms-overflow-style: none;
  
  -ms-scroll-chaining: none;
  
  -ms-scroll-snap-type: mandatory;
  
  -ms-scroll-snap-points-x: snapInterval(0%, 100%);
}

Vue Carousel 3d – Go to slide index
Web Programming Tutorials Example with Demo

Read :

READ :  AngularJS Custom Directives example - Angular Directives

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about VueJs Image Carousels Sliders with Demo.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Add a Comment

Your email address will not be published. Required fields are marked *