/============================================================================ #FlexSlider - jQuery FlexSlider v2.2.2 | http://www.woothemes.com/flexslider/ - Contributing author: Tyler Smith (@mbmufffin) ==============================================================================/ .flexslider { margin: 0 0 $gutter1.5; padding: 0; } .flexslider li { margin: 0; max-width: 100%; } .flexslider .slides > li { display: none; / Hide the slides before the JS is loaded. Avoids image jumping / margin: 0; position: relative; @include backface(); .slide-hide { visibility: hidden; } } .flexslider .slides img { max-width: 100%; margin: 0 auto; display: block; } .flexslider .slides .placeholder-noblocks { height: auto; width: 100%; max-height: 100%; @include at-query ($min, $large) { height: 430px; } @include at-query ($max, $medium) { height: 30vh; } } .slides { @include clearfix; } html[xmlns] .slides { display: block; } * html .slides { height: 1%; } /================ No JS Fallback ================/ .no-js .slides > li:first-child { display: block; } .flexslider { position: relative; zoom: 1; } .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .flexslider .slides { zoom: 1; } .carousel li { margin-right: 5px; } /================ Direction Nav ================/ .flex-direction-nav { margin: 0; padding: 0; list-style: none; } .flex-direction-nav { height: 0; } .flex-direction-nav a { display: block; width: 45px; position: absolute; top: 0; bottom: 0; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; @include transition(all .3s ease); } .flex-direction-nav .flex-disabled { opacity: 0!important; filter: alpha(opacity=0); cursor: default; } .flex-direction-nav a { text-indent: -9999px; background: { color: transparent; repeat: no-repeat; size: 20px auto; } &.flex-prev { background-image: url(“data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjIuM3B4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCAyMi4zIDQwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMi4zIDQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNEM0QzRDMiIGQ9Ik0xOC43LDBMMCwxOS43TDE4LjcsNDBjMCwwLDUuMi0xLDMuMS0zLjFTNS43LDE5LjcsNS43LDE5LjdzMTQtMTQuNSwxNi4xLTE2LjZTMTguNywwLDE4LjcsMHoiLz4NCjwvc3ZnPg0K”); background-position: center left; } &.flex-next { background-image: url(“data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMjIuM3B4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCAyMi4zIDQwIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyMi4zIDQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNEM0QzRDMiIGQ9Ik0wLjUsMy4xYzIuMSwyLjEsMTYuMSwxNi42LDE2LjEsMTYuNlMyLjYsMzQuOCwwLjUsMzYuOVMzLjYsNDAsMy42LDQwbDE4LjctMjAuM0wzLjYsMEMzLjYsMC0xLjYsMSwwLjUsMy4xDQoJeiIvPg0KPC9zdmc+DQo=”); background-position: center right; } } /================ Control Nav ================/ .flex-control-nav { position: absolute; bottom: -$gutter; width: 100%; text-align: center; margin: 0; padding: 0; list-style: none; li { margin: 0 4px; display: inline-block; zoom: 1; display: inline; vertical-align: middle; } } .flex-control-paging li a { width: 12px; height: 12px; display: block; background-color: $colorBorder; cursor: pointer; text-indent: -9999px; border-radius: 20px; border: 2px solid $colorBody; @include transition(all 0.1s ease-in-out); &:hover { background-color: darken($colorBorder, 10%); } &.flex-active { background-color: $colorBody; border-color: $colorPrimary; cursor: default; } } .flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;} .flex-control-thumbs li {width: 25%; float: left; margin: 0;} .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;} .flex-control-thumbs img:hover {opacity: 1;} .flex-control-thumbs .flex-active {opacity: 1; cursor: default;} @include at-query ($max, $medium) { .flex-direction-nav a { opacity: 1; width: 25px; } .flex-direction-nav a.flex-prev { left: 0; background-position: center right; } .flex-direction-nav a.flex-next { right: 0; background-position: center left; } } @include at-query ($min, $large) { .flex-direction-nav .flex-prev { left: 10px; } .flex-direction-nav .flex-next { right: 10px; } .flexslider:hover .flex-prev { opacity: 1; left: (-$gutter)+5; } .flexslider:hover .flex-next { opacity: 1; right: (-$gutter)+5; } } @include at-query ($min, $maxWidthBp) { .flex-direction-nav .flex-prev { left: 20px; } .flex-direction-nav .flex-next { right: 20px; } .flexslider:hover .flex-prev { opacity: 1; left: -45px; } .flexslider:hover .flex-next { opacity: 1; right: -45px; } } /================ Custom Flexslider Styles ================/ .flexslider .slides { margin: 0; padding: 0; list-style-type: none; } .slide-link { display: block; img { display: block; } } /============================================================================ #Magnific Popup http://dimsemenov.com/plugins/magnific-popup/ ==============================================================================*/ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; filter: alpha(opacity=80); } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-container:before { content: ‘’; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; }
Hey @ziaulhasan .
Thanks for reaching out.
Would you be able to share your online store URL? As this will allow us to take a closer look into the theme and coding being used.
Looking forward to your response