merdan
/
sarga
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Slider animations and transition working.

This commit is contained in:
prashant-webkul 2018-08-13 14:39:40 +05:30
parent 282d8695bc
commit e173f9c7e6
3 changed files with 107 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/Webkul/Shop/src/Resources/assets/js/components/image-slider.vue
View File

@ -3,12 +3,10 @@
<div class="slider-content" v-if="images.length>0">
<ul class="slider-images">
<li v-for="(image,index) in images" :key="index" v-bind:class="{'show': index==currentIndex}">
<img class="slider-item" :src="image" />
<!-- <div class="show-content"></div> -->
</li>
</ul>
<div class="slider-control" v-if="images_loaded">
@ -42,7 +40,7 @@ export default {
};
},
mounted(){
mounted() {
this.getProps();
},
@ -121,4 +119,5 @@ export default {
opacity: 0;
}
</style>

1
packages/Webkul/Shop/src/Resources/assets/sass/_variables.scss vendored
View File

@ -13,6 +13,7 @@ $offer-color: #ff6472;
$sign-up-text-color: #5e5e5e;
$login-text: #3a3a3a;
$background-color: #ffffff;
$color-black : black;
$forgot-password-color: #0031f0;
$profile-content-color: #5e5e5e;
//customer variables ends here

184
packages/Webkul/Shop/src/Resources/assets/sass/app.scss vendored
View File

@ -170,31 +170,6 @@ body {
font-size: 16px;
display: block;
// .menu-bar {
// display: flex;
// flex-direction: row;
// justify-content: flex-start;
// align-items: center;
// height: 48px;
// width: 80%;
// margin-left: auto;
// margin-right: auto;
// li {
// display: flex;
// flex-direction: row;
// align-items: center;
// justify-content: center;
// // background-color: blue;
// height: 100%;
// margin: 2.5%;
// }
// li:last-child {
// margin-left: auto;
// color: $offer-color;
// }
// }
ul.nav {
display: block;
font-size:16px;
@ -304,63 +279,53 @@ body {
}
}
.slider-block {
section.slider-block {
display: block;
width: 80%;
height: 500px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5%;
.slider-content {
div.slider-content {
width: 80%;
height: 500px;
margin-left: auto;
margin-right: auto;
ul.slider-images {
li{
//both rules are equivalent to display none
position: absolute;
display: none;
width: 80%;
object-fit: fill;
visibility: hidden;
}
li.show {
display:block;
height: 500px;
visibility: visible;
width: 80%;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {opacity: 0.1;}
100% {opacity: 1;}
}
li img {
width: 100%;
height: 500px;
object-fit: fill;
width:100%;
}
// li img {
// position: absolute;
// display: none;
// width: 80%;
// height: 500px;
// object-fit: fill;
// }
// li img.show {
// display:block;
// height: 500px;
// }
}
.slider-control {
display: inline-block;
vertical-align: middle;
div.slider-control {
display: block;
position: absolute;
right: 10%;
margin-right: 10px;
margin-bottom: 1.8%;
user-select: none;
bottom: 2%;
right: 11%;
.dark-left-icon {
background-color: white;
background-color: $background-color;
height: 48px;
width: 48px;
max-height: 100%;
@ -368,7 +333,7 @@ body {
}
.light-right-icon {
background-color: black;
background-color: $color-black;
height: 48px;
width: 48px;
max-height: 100%;
@ -654,7 +619,7 @@ body {
align-content: center;
justify-content: flex-start;
border: 1px solid #e8e8e8;
background: #ffffff;
background: $background-color;
width: 25%;
height: 100%;
text-transform: capitalize;
@ -680,7 +645,7 @@ body {
border-bottom: none;
}
li.active {
color: #0031f0;
color: $forgot-password-color;
}
}
@ -946,20 +911,60 @@ body {
}
}
}
.slider-block {
display: block;
width: 100%;
margin-bottom: 5%;
.slider-content {
section.slider-block {
div.slider-content {
width:100%;
ul.slider-images {
li img {
li{
position: absolute;
display: none;
}
li.show {
display:block;
width: 100%;
object-fit: fill;
}
li img {
height: 500px;
width:100%;
}
}
div.slider-control {
display: inline-block;
position: absolute;
user-select: none;
width: 100%;
right: 0;
bottom: 50%;
.dark-left-icon {
background-color: $background-color;
height: 48px;
width: 48px;
max-height: 100%;
max-width: 100%;
margin-left: 5%;
}
.light-right-icon {
background-color: $color-black;
float:right;
height: 48px;
width: 48px;
max-height: 100%;
max-width: 100%;
margin-right: 5%;
}
}
}
}
.main-container-wrapper {
margin-left: 4%;
margin-right: 4%;
@ -1155,6 +1160,7 @@ body {
}
}
@media all and (min-width: 481px) and (max-width: 920px) {
.header {
// border: 1px solid black;
@ -1328,22 +1334,40 @@ body {
}
}
}
.slider-block {
display: block;
width: 92%;
margin-left: auto;
margin-right: auto;
margin-bottom: 5%;
.slider-content {
section.slider-block {
div.slider-content {
width:92%;
ul.slider-images {
li img {
width: 100%;
object-fit: fill;
li{
position: absolute;
display: none;
}
li.show {
display:block;
width: 92%;
}
li img {
height: 500px;
width:100%;
}
}
div.slider-control {
display: inline-block;
position: absolute;
user-select: none;
bottom: 1em;
right: 5.5%;
}
}
}
.main-container-wrapper {
margin-left: 4%;
margin-right: 4%;