I am trying to use jQuery-UI draggable which is working fine, but I have a strange behavior. When I am setting a containment, the draggable div jumps from one side to another. When I am disabling it, then I can smoothly drag the container.
$('.bJS_issueTeaser').draggable({
'cursor': 'move',
axis: "x",
containment: "parent"
});
.b_ct_issueTeaser {
width: 37.665rem;
overflow: hidden;
max-width: 100%;
margin-top: 60px;
position: relative;
min-height: 250px;
}
.bJS_issueTeaser {
width: 50.0745rem;
position: absolute;
}
.row {
display: flex;
flex-wrap: wrap;
margin-left: -0.67rem;
margin-right: -0.67rem;
}
.c_teaser {
width: 240px;
height: 100px;
padding-left: 0.67rem;
padding-right: 0.67rem;
}
.c_teaser-inner {
position: relative;
}
.c_description {
position: absolute;
bottom: 0;
width: 100%;
height: 2rem;
background: rgba(255, 255, 255, 0.5);
padding: 0.67rem 1.34rem;
}
.img-fluid {
display: block;
max-width: 100%;
height: auto;
}
<div class="b_ct_issueTeaser">
<div class="bJS_issueTeaser ui-draggable ui-draggable-handle">
<div class="row c_row">
<div class="c_teaser">
<div class="c_teaser-inner">
<img class="img-fluid" src="http://placehold.it/240x100" width="240" height="100" alt="">
<div class="c_description">
<a class="b_is-unstyledLink" href="#">
<p>
Lorem ipsum
</p>
</a>
</div>
</div>
</div>
<div class="c_teaser">
<div class="c_teaser-inner">
<img class="img-fluid" src="http://placehold.it/240x100" width="240" height="100" alt="">
<div class="c_description">
<a class="b_is-unstyledLink" href="#">
<p>
Lorem Ipsum
</p>
</a>
</div>
</div>
</div>
<div class="c_teaser c_teaser-right">
<div class="c_teaser-inner">
<img class="img-fluid" src="http://placehold.it/240x100" width="240" height="100" alt="">
<div class="c_description">
<a class="b_is-unstyledLink" href="#">
<p>
Lorem ipsum
</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
jsFiddle
Related
I want to create a carousel like this one here:
https://codepen.io/newrya/pen/eYMZdKe
The catch is, I want to make an auto play carousel using "slick" and want the above slider as individual elements instead of images. This is my initial Code. So, instead of these img elements inside div having class horizontal. I want the above slider as the elements.
$('.horizontal').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 100,
});
#slider img{
width: 350px;
height: 350px;
margin-right: 100px;
}
<section id="slider" style="background-color:#fefefe;height: 800px;">
<div class="horizontal">
<img src="images/imags/1.jpg" class="before_after">
<img src="images/imags/2.jpg" class="before_after">
<img src="images/imags/3.jpg" class="before_after">
<img src="images/imags/4.jpg" class="before_after">
<img src="images/imags/5.jpg" class="before_after">
<img src="images/imags/6.jpg" class="before_after">
<img src="images/imags/8.jpg" class="before_after">
<img src="images/imags/9.jpg" class="before_after">
<img src="images/imags/10.jpg" class="before_after">
<img src="images/imags/11.jpg" class="before_after">
<img src="images/imags/12.jpg" class="before_after">
<img src="images/imags/13.jpg" class="before_after">
<img src="images/imags/14.jpg" class="before_after">
<img src="images/imags/15.jpg" class="before_after">
<img src="images/imags/16.jpg" class="before_after">
</div>
</section>
I copied the codepen code and replaced it with my img elements and made some changes with the css code and pasted it in my styles sheet.
This is the code:
const slider = document.querySelector('#image-slider');
const wrapper = document.querySelector('.img-wrapper');
const handle = document.querySelector('.handle');
slider.addEventListener("mousemove", sliderMouseMove);
slider.addEventListener("touchmove", sliderMouseMove);
function sliderMouseMove(event) {
if (isSliderLocked) return;
const sliderLeftX = slider.offsetLeft;
const sliderWidth = slider.clientWidth;
const sliderHandleWidth = handle.clientWidth;
let mouseX = (event.clientX || event.touches[0].clientX) - sliderLeftX;
if (mouseX < 0) mouseX = 0;
else if (mouseX > sliderWidth) mouseX = sliderWidth;
wrapper.style.width = `${((1 - mouseX/sliderWidth) * 100).toFixed(4)}%`;
handle.style.left = `calc(${((mouseX/sliderWidth) * 100).toFixed(4)}% - ${sliderHandleWidth/2}px)`;
}
let isSliderLocked = false;
slider.addEventListener("mousedown", sliderMouseDown);
slider.addEventListener("touchstart", sliderMouseDown);
slider.addEventListener("mouseup", sliderMouseUp);
slider.addEventListener("touchend", sliderMouseUp);
slider.addEventListener("mouseleave", sliderMouseLeave);
function sliderMouseDown(event) {
if (isSliderLocked) isSliderLocked = false;
sliderMouseMove(event);
}
function sliderMouseUp() {
if (!isSliderLocked) isSliderLocked = true;
}
function sliderMouseLeave() {
if (isSliderLocked) isSliderLocked = true;
}
$('.horizontal').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 100,
});
#slider img {
width: 350px;
height: 350px;
margin-right: 100px;
}
.horizontal {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
:root {
--image-slider-width: min(80vw, 768px);
--image-slider-handle-width: 50px;
}
.horizontal {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: sans-serif;
}
#image-slider {
position: relative;
width: var(--image-slider-width);
overflow: hidden;
border-radius: 1em;
box-shadow: -4px 5px 10px 1px gray;
cursor: col-resize;
}
#image-slider img {
display: block;
width: var(--image-slider-width);
height: auto;
max-height: 80vh;
object-fit: cover;
pointer-events: none;
user-select: none;
}
#image-slider .img-wrapper {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
overflow: hidden;
z-index: 1;
}
#image-slider .img-wrapper img {
position: absolute;
top: 0;
right: 0;
height: 100%;
filter: grayscale(100%);
transform: scale(1.2);
}
#image-slider .handle {
border: 0px solid red;
position: absolute;
top: 0;
left: calc(50% - var(--image-slider-handle-width)/2);
width: var(--image-slider-handle-width);
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
user-select: none;
z-index: 2;
}
#image-slider .handle-circle {
width: var(--image-slider-handle-width);
height: var(--image-slider-handle-width);
color: white;
border: 2px solid white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: space-evenly;
}
#image-slider .handle-line {
width: 2px;
flex-grow: 1;
background: white;
}
#media (max-width: 768px) {
:root {
--image-slider-width: 90vw;
}
}
<section id="slider" style="background-color:#fefefe;height: 800px;">
<div class="horizontal">
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
« »
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
« »
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
« »
</div>
<div class="handle-line"></div>
</div>
</div>
<div id="image-slider">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
<div class="img-wrapper">
<img src="https://images.pexels.com/photos/3923387/pexels-photo-3923387.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2">
</div>
<div class="handle">
<div class="handle-line"></div>
<div class="handle-circle">
« »
</div>
<div class="handle-line"></div>
</div>
</div>
</section>
For some, reason, in class "handle-circle", the code after '171' is not valid(it turns green).
The second problem I am facing is, the codepen slider doesn't work when I replaced it with the img elements. The 'mousemove' event is of no use when using it in carousels. How do I change that?
I think you might have issues with the slick mouse over binding conflicting with the mouse over your image, as a workaround you could iframe it and it will work like so
$(document).ready(function() {
$('.carousel').slick({
slidesToShow: 3,
dots: true,
centerMode: true,
});
});
html,
body {
background-color: #e74c3c;
}
.wrapper {
width: 100%;
padding-top: 20px;
text-align: center;
}
h2 {
font-family: sans-serif;
color: #fff;
}
.carousel {
width: 90%;
margin: 0px auto;
}
.slick-slide {
margin: 10px;
}
.slick-slide img {
width: 100%;
border: 2px solid #fff;
}
.wrapper .slick-dots li button:before {
font-size: 20px;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="wrapper">
<h2>Slick Carousel Example
<h2>
<div class="carousel">
<div>
<iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
</div>
<div> <iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe></div>
<div> <iframe width="100%" height="300" style="margin-top: -210px;" src="https://codepen.io/ptahume/full/YzaNzjy" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe></div>
<div><img src="https://picsum.photos/300/200?random=4"></div>
<div><img src="https://picsum.photos/300/200?random=5"></div>
<div><img src="https://picsum.photos/300/200?random=6"></div>
</div>
</div>
not a nice solution but will give you what you want
This question already has answers here:
Center image using text-align center?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I have a carousel that is working perfectly fine as I want but I'm having trouble center aligning the image and text properly. It looks fine in small screen but is not aligned in bigger screens or smaller screens.
Also the previous and next button arrows are not aligned in the center of the background circle aswell.
HTML
<div>
<h3 style="text-align:center; padding:30px; padding-bottom:10px;">Trending now</h3>
<!-- Multi Carousel -->
<div class="prod-slider-container">
<div class="inner-container">
<div class="owl-carousel">
<div class="item">
<img src="https://www2.hm.com/content/dam/hm-magazine-2020/featured-fashion/20_13_A_trend_bildspel_1.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Jackets & Coats</span>
</p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2F33%2F9e%2F339e3549ec41eef34883a4fbe73e8501c36764fb.jpg%5D%2Corigin%5Bdam%5D%2Ccategory%5Bladies_cardigansjumpers_cardigans%5D%2Ctype%5BLOOKBOOK%5D%2Cres%5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Cardigans &<br> Sweaters</span>
</p>
</div>
<div class="item">
<img src="https://cdna.lystit.com/photos/56a1-2014/11/06/hm-blue-jumper-in-a-mohair-blend-product-1-25065199-0-150443488-normal.jpeg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Clothes</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/736x/32/00/a8/3200a8617dfbc6139b8251a36d5118de.jpg">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Boys 11/2-10<br> years</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmprod?hmver=0&set=quality[79],source[/environment/2016/8EZ_0117_008R.jpg],width[4054],height[4740],x[549],y[438],type[FASHION_FRONT]&call=url[file:/product/main]">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Girls 11/2-10<br> years</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/736x/b3/21/bd/b321bd9d618ee5439cd7218f9a543704.jpg">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Hoodies &<br> Sweatshirts</span></p>
</div>
<div class="item">
<img src="https://media1.popsugar-assets.com/files/thumbor/Ol-YWVWUQnVmpEjhoKL6eZK0Kfo/fit-in/2048xorig/filters:format_auto-!!-:strip_icc-!!-/2014/09/11/879/n/24155406/6877ea140db7a0db_thumb_temp_image22153611410465627/i/HM-Newborn-Clothes.jpg">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Newborn 0-9<br>months</span></p>
</div>
<div class="item">
<img src="https://mk0stylisheve1cal1r6.kinstacdn.com/wp-content/uploads/2011/12/HM-Jumpers-and-Cardigans-for-Men_01.jpg">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Cardigans &<br> Sweaters</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2F0e%2F50%2F0e50030ec7575845e95ead7a4046c4522544852d.jpg%5D%2Corigin%5Bdam%5D%2Ccategory%5Bmen_trousers_dressed%5D%2Ctype%5BLOOKBOOK%5D%2Cres%5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Pants</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/originals/b7/2a/50/b72a5020325b27dd6c053223703ee04b.jpg">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Baby Exclusive <br> 0m-4 years</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2Fe3%2F6c%2Fe36c9e916fdfa4b3896bfe9992889b7fa4a827ca.jpg%5D%2Corigin%5Bdam%5D%2Ccategory%5Bladies_cardigansjumpers_hoodiessweatshirts%5D%2Ctype%5BLOOKBOOK%5D%2Cres%5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Hoodies & <br> Sweatshirts</span></p>
</div>
<div class="item">
<img src="https://media1.popsugar-assets.com/files/thumbor/18fWRKJF__pohskeGtu_P3dCSRE/fit-in/1024x1024/filters:format_auto-!!-:strip_icc-!!-/2020/01/08/883/n/1922564/28a69c26b18fd4bf_netimgaMezvq/i/HM-Paper-bag-Pants.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Pants</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/originals/14/ff/b0/14ffb09b1bcef167ed28a9624748e032.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Accessories</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=width[800],quality[80],options[limit]&source=url[https://www2.hm.com/content/dam/men_s02/september_2020/3132b/3132B-1x1-v41-the-casual-edit.jpg]&scale=width[global.width],height[15000],options[global.options]&sink=format[jpg],quality[global.quality]">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Jackets & <br>Coats</span></p>
</div>
<div class="item">
<img src="https://media1.popsugar-assets.com/files/thumbor/ornsuB5wU0zsOvtIq06LKYZaN0o/fit-in/1024x1024/filters:format_auto-!!-:strip_icc-!!-/2019/06/05/932/n/1922564/201a10c4095b52d1_netimgVaH6Nm/i/HM-Linen-Shirt.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Shirts &<br> blouses</span></p>
</div>
<div class="item">
<img src="https://decoholic.org/wp-content/uploads/2020/09/HM-Home-fall-2020-2.jpg">
<p class="carosueltitletxt">
H&M Home<br>
<span class="carosueltxt">New Home &<br> Interior</span></p>
</div>
</div>
</div>
</div>
CSS
/*carousel*/
.prod-slider-container {
position: relative;
font-family: font-awesome;
margin-left: 10%;
margin-right: 10%;
}
.owl-buttons {
background-color: transparent;
border: 0px none transparent;
width: 9%;
}
.owl-prev,
.owl-next {
position: absolute;
top: 37px;
}
i.fa {
cursor: pointer;
font-size: 10px;
padding-top: 0;
height: 0;
width: 0px;
color: rgba(0, 0, 4, 0.5);
}
.owl-perv {
left: -2%;
}
.owl-next {
right: 5.1%;
}
.item img {
margin-left: 10px;
margin-right: 10px;
width: 100px;
height: 100px;
border-radius: 50px;
background: #222222;
object-fit: cover;
}
.carosueltitletxt{
font-family:helvetica;
text-align:center;
color:#555555;
font-size:11px;
font-weight:bold;
}
.carosueltxt{
font-family:helvetica;
text-align:center;
color:#222222;
}
.d4-container img {
position: relative;
margin-left: 10%;
margin-right: 10%;
margin-top: 20px;
display: block;
width: 80%;
height: 400px;
object-fit: cover;
background: gray;
}
JQuery
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
items: 8,
pagination:false,
itemsDesktop: [1199, 5],
itemsDesktopSmall: [979, 5],
navigation: true,
navigationText: [
"<i class='fa fa-chevron-left'></i>",
"<i class='fa fa-chevron-right'></i>"
]
});
});
Hi can you please try with this and let me know thank you.
.prod-slider-container .item a {
display: block;
margin: 0 auto;
float: none;
text-align: center;
}
To center the texts and the images, add text-align: center; to the wrapper element which is .item in this case.
You can add this text-align: center; to the second parent .owl-carousel or the third .inner-container also, that would make all the texts and images inside centered.
And for .owl-next & .owl-prev honestly, if you can't provide the live example of this carousel, I can't be specific about the solution, this is a simple try based on your provided code, hope this would help you find the solution-
.inner-container {
position: relative;
}
.inner-container .owl-prev,
.inner-container .owl-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.owl-prev {left: 15px}
.owl-next {right: 15px}
just use display: flex on .item class and change the value of justify-content and align items to fit your need.
like this:
.item{
display: flex;
justify-content: center;
align-items: space-around;
}
Menus are getting hided due to slider overlapping on the menus .unable to see my menus.menu - lessons are not visible. im using jssora22l which is getting overlapped on my menu 'Lessons' under the tab of Courses. tried with z index 1000 but still im not getting the menus.
code
https://codepen.io/krishnakernel/pen/YNzppX
<header class="headerpart">
<div class="container">
<div class="logo">
<a href="#">
<img class="abc" src="images-Logo.png" alt="krishnamohan" height="50" width="235" />
</a>
</div>
<div class="menu" >
<nav>
<ul>
<li>Home</li>
<li>
Courses
<ul>
<li>Lesson</li>
<li>Practicals</li>
<li>Projects</li>
</ul>
</li>
<li>Contact</li>
<li>login</li>
<li>Sign up</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
<div data-p="225.00">
<img data-u="image" src="img/red.jpg" />
<div style="position:absolute;top:30px;left:30px;width:480px;height:120px;z-index:0;font-size:50px;color:#ffffff;line-height:60px;">TOUCH SWIPE SLIDER</div>
<div style="position:absolute;top:300px;left:30px;width:480px;height:120px;z-index:0;font-size:30px;color:#ffffff;line-height:38px;">Build your slider with anything, includes image, content, text, html, photo, picture</div>
<div data-u="caption" data-t="0" style="position:absolute;top:120px;left:650px;width:470px;height:220px;z-index:0;">
<img style="position:absolute;top:0px;left:0px;width:470px;height:220px;z-index:0;" src="img/c-phone-horizontal.png" />
<div style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0; overflow: hidden;">
<img data-u="caption" data-t="1" style="position:absolute;top:0px;left:0px;width:379px;height:213px;z-index:0;" src="img/c-slide-1.jpg" />
<img data-u="caption" data-t="2" style="position:absolute;top:0px;left:379px;width:379px;height:213px;z-index:0;" src="img/c-slide-3.jpg" />
</div>
<img style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0;" src="img/c-navigator-horizontal.png" />
<img data-u="caption" data-t="3" style="position:absolute;top:740px;left:1600px;width:257px;height:300px;z-index:0;" src="img/c-finger-pointing.png" />
</div>
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" src="img/purple.jpg" />
</div>
<div data-p="225.00" data-po="80% 55%" style="display: none;">
<img data-u="image" src="img/blue.jpg" />
</div>
<a data-u="any" href="" style="display:none">Full Width Slider</a>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1">
<!-- bullet navigator item prototype -->
<div data-u="prototype" style="width:16px;height:16px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora22l" style="top:0px;left:8px;width:40px;height:58px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora22r" style="top:0px;right:8px;width:40px;height:58px;" data-autocenter="2"></span>
</div>
https://codepen.io/krishnakernel/pen/YNzppX
screen shot
This is likely a z-index issue as many people have pointed out, you should add the following to your css:
.headerpart {
position: relative;
z-index: 1;
}
The menu div needs a higher z-index and either position: relative; or position: absolute; in order for the z-index to work.
.headerpart .menu {
z-index: 2; /* higher z-index for the menu div */
}
I also noticed from your codepen that > .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av has a value of overflow: hidden; which could also be potentially causing the issue. You might need to change that to overflow: visible; OR overflow: auto;
The codepen provided does not help much as you have not added the styles for your menu HTML.
<header class="headerpart" style="z-index:9999;position:relative;">
<div class="container">
<div class="logo">
<a href="#">
<img class="abc" src="images-Logo.png" alt="krishnamohan" height="50" width="235" />
</a>
</div>
<div class="menu" >
<nav>
<ul>
<li>Home</li>
<li>
Courses
<ul>
<li>Lesson</li>
<li>
<a href="#">
Practicals
</a>
</li>
<li>Projects</li>
</ul>
</li>
<li>Contact</li>
<li>
login
</li>
<li>Sign up</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
<div data-p="225.00">
<img data-u="image" src="img/red.jpg" />
<div style="position:absolute;top:30px;left:30px;width:480px;height:120px;z-index:0;font-size:50px;color:#ffffff;line-height:60px;">TOUCH SWIPE SLIDER</div>
<div style="position:absolute;top:300px;left:30px;width:480px;height:120px;z-index:0;font-size:30px;color:#ffffff;line-height:38px;">Build your slider with anything, includes image, content, text, html, photo, picture</div>
<div data-u="caption" data-t="0" style="position:absolute;top:120px;left:650px;width:470px;height:220px;z-index:0;">
<img style="position:absolute;top:0px;left:0px;width:470px;height:220px;z-index:0;" src="img/c-phone-horizontal.png" />
<div style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0; overflow: hidden;">
<img data-u="caption" data-t="1" style="position:absolute;top:0px;left:0px;width:379px;height:213px;z-index:0;" src="img/c-slide-1.jpg" />
<img data-u="caption" data-t="2" style="position:absolute;top:0px;left:379px;width:379px;height:213px;z-index:0;" src="img/c-slide-3.jpg" />
</div>
<img style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0;" src="img/c-navigator-horizontal.png" />
<img data-u="caption" data-t="3" style="position:absolute;top:740px;left:1600px;width:257px;height:300px;z-index:0;" src="img/c-finger-pointing.png" />
</div>
</div>
<div data-p="225.00" style="display: none;">
<img data-u="image" src="img/purple.jpg" />
</div>
<div data-p="225.00" data-po="80% 55%" style="display: none;">
<img data-u="image" src="img/blue.jpg" />
</div>
<a data-u="any" href="" style="display:none">Full Width Slider</a>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1">
<!-- bullet navigator item prototype -->
<div data-u="prototype" style="width:16px;height:16px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora22l" style="top:0px;left:8px;width:40px;height:58px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora22r" style="top:0px;right:8px;width:40px;height:58px;" data-autocenter="2"></span>
</div>
Set a z-index to the header. Don't forget to add a relative position to header for z-index work.
.headerpart{z-index:9999;position:relative}
This is z-index issue give z-index value high to the menubar try the below z-index value to menu class
.menu
{
z-index:9999;
position:relative
}
I have created a Fadein/Fadeout slider. Left button and right button are working fine but I want to play slider by clicking on tab buttons.
JSfiddle
HTML
<p id="slide1_controls">
<div class="block-icon icon-s1">
<img class="block-img icon-s1" src="../_images/building_icon1.png" data-hover-image="../_images/building_icon1_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s2">
<img class="block-img icon-s2" src="../_images/building_icon2.png" data-hover-image="../_images/building_icon2_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s3">
<img class="block-img icon-s3" src="../_images/building_icon3.png" data-hover-image="../_images/building_icon3_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s4">
<img class="block-img icon-s4" src="../_images/building_icon4.png" data-hover-image="../_images/building_icon4_hover.png" data-selected="false" />
</div>
</p>
<div class="slider-text-context" id="target">
<div class="slide-01 fade-texts active">tab1</div>
<div class="slide-02 fade-texts">tab2</div>
<div class="slide-03 fade-texts">tab3</div>
<div class="slide-04 fade-texts">tab4</div>
</div>
CSS
.fade-texts {
width: 100%;
height: 259px;
left: 0px;
position: absolute;
}
.slider-btn-area {
position: absolute;
z-index: 8;
margin-left: auto;
margin-right: auto;
left: 25%;
top: 54%;
width: 50%;
}
#target > div {
display:none;
}
#target div:nth-child(1) {
display:block;
}
.tab-area {
position: absolute;
left: 25%;
top: 30%;
}
Javascript
$(".icon-s2").click(function() {
activeElem = $("#target .slide-02");
activeElem.removeClass('active').fadeOut(0);
if (!activeElem.is(':first-child')) {
activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
}
}
$(".icon-s3").click(function() {
activeElem = $("#target .slide-03");
activeElem.removeClass('active').fadeOut(0);
if (!activeElem.is(':first-child')) {
activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
}
}
When I press the tab it does not work to try to appear a DIV.
Your code made no sense. The way it looked was that the images had to be clicked in order to fadeIn/Out the tabs. I believe it should be the other way. I cleaned up the markup, and simplified the classes, ids, styles, etc...
Here's the DEMO
HTML
<div id="slides">
<div id="slide1" class="slide active">
<img class="img" src="http://placehold.it/150x50/000/Fff.png&text=FIRST" />
</div>
<div id="slide2" class="slide">
<img class="img" src="http://placehold.it/150X50/048/Fee.png&text=SECOND" />
</div>
<div id="slide3" class="slide">
<img class="img" src="http://placehold.it/150X50/fa8/375.png&text=THIRD" />
</div>
<div id="slide4" class="slide">
<img class="img" src="http://placehold.it/150X50/9a7/a10.png&text=FOURTH" />
</div>
</div>
<div class="tab-area" id="controls">
<div id="tab1" class="tab">1</div>
<div id="tab2" class="tab">2</div>
<div id="tab3" class="tab">3</div>
<div id="tab4" class="tab">4</div>
</div>
CSS
.slide {
display:none;
}
.active {
display: block;
}
.tab {
width: 16px;
height: 16px;
display: inline-block;
margin: 0 10px;
outline: 1px solid black;
text-align: center;
cursor: pointer;
}
jQuery/JavaScript
$(function () {
$('.tab').on('click', function (event) {
var tabID = event.target.id;
//console.log('tabID: '+tabID);
var order = tabID.split('b').pop();
//console.log('order: '+order);
var pos = parseInt(order, 10);
var slideID = 'slide'+pos;
//console.log('slideID: '+slideID);
var act = document.getElementById(slideID);
//console.log('act: '+act.id);
$('.slide').fadeOut(0).removeClass('active');
$(act).addClass('active').fadeIn(750);
});
});
I need some help to make the image fit inside the DIV Tag with provided height and width and should not stretch. As a few images are Landscape and a few are Portrait, I need to force them to fit into the DIV OR IMG Tag.
<div class="frame" style="">
<img id="photo" src="http://pocketlink.epocketlife.com/ImageRepository/images/events/ADEBAB1C-4FAF-4D65-A43D-A02978B76340/7adb104b-5140-45d9-a694-56cf5112917d.png">
</div>
This is one of the Examples I found, you may implement there.
http://jsbin.com/vikanovaya/edit?html,css,output
You will need to use some CSS position trickery to achieve what you want but hopefully one of these examples will do what you want.
Example 1 - A Single Image
In the example below, the image will grow or shrink when the image hits the edge of the container. If you resize the example horizontally or vertically it will never crop. (Try the fullscreen example for instance).
Requires: CSS Only
body {
margin: 0;
padding: 0;
font-family: "Segoe UI Light", "Helvetica Neue LT", "Helvetica Ultra LT", "Roboto", Arial, sans-serif;
}
.gallery {
background: rgba(0, 0, 0, 0.9);
border-radius: 10px;
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
overflow: hidden;
z-index: 2;
}
.gallery .imageWrapper {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
.gallery .imageWrapper img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
<div class="gallery isFullScreen">
<div class="imageWrapper">
<img src="http://via.placeholder.com/3500x1500" />
</div>
</div>
Example 2 - Thumbnails
In this example there are two images that don't conform to their containers aspect ratio. They are resized so that their longest edge hits the div first and then they are centered. All thumbnail containers should now be the same size and images that do not conform shrink to fit.
Requires: CSS Only
.galleryArea {
background: rgba(0,0,0,0.7);
padding: 10px;
overflow: hidden;
}
.galleryArea .imageWrapper {
position: relative;
width: 100px;
height: 100px;
float: left;
background: #fff;
}
.galleryArea .imagePosition {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
}
.galleryArea .imagePosition img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
}
<div id="contentGallery" class="galleryArea">
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x400" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x100" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
</div>
Example 3 - Thumbnails that Stretch
In this example, the two images that do not conform to their containers aspect ratios are now stretched so that their shortest edge expands to fill the container and their longest edge overflows. This makes the end result a little neater but requires JavaScript to help things along.
Requires: CSS and JavaScript (jQuery)
$(window).on("load", function() {
orientateGalleryImages($("#contentGallery").children().children().children("img"));
});
function orientateGalleryImages(images) {
images.each(function() {
var thisImage = jQuery(this);
if(thisImage.height() > thisImage.width()) {
thisImage.addClass("portrait");
} else if(thisImage.width() > thisImage.height()) {
thisImage.addClass("landscape");
} else {
thisImage.addClass("square");
}
});
}
.galleryArea {
background: rgba(0,0,0,0.7);
padding: 10px;
display: flex;
}
.galleryArea .imageWrapper {
position: relative;
width: 10%;
padding-top: 10%;
overflow: hidden;
}
.galleryArea .imagePosition {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.galleryArea .imagePosition img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.galleryArea .imagePosition img.landscape {
max-height: 50%;
height: 50%;
left: -50%;
margin-left: 25%;
}
.galleryArea .imagePosition img.portrait {
max-width: 50%;
width: 50%;
}
.galleryArea .imagePosition img.square {
max-width: 50%;
max-height: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentGallery" class="galleryArea">
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x400" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x100" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300" />
</div>
</div>
</div>