I am currently working on implementing a unique feature using jQuery and CSS. Rather than just inheriting the width, I want to create a magic line that extends to the next index item.
Scenario:
1: Hover over Element one
ELEMENT ONE ELEMENT TWO ELEMENT THREE
___________
2: Hover over Element two
ELEMENT ONE ELEMENT TWO ELEMENT THREE
__________________________
3: Hover over Element three
ELEMENT ONE ELEMENT TWO ELEMENT THREE
__________________________________________
Although I have made some progress, I am facing challenges in getting the elements to expand properly based on the width of the entire list.
// JavaScript code for the carousel functionality
#magic-line {
position: absolute;
bottom: -2px;
left: 0;
width: 100px;
height: 2px;
background: #fe4902;
}
// Additional CSS styles for the carousel display
.slick-slider {
position: relative;
overflow: hidden;
}
.carousel{
// Additional CSS styles for the carousel container
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<div class="carousel">
<div class="carousel-image">
<div class="container-big">
<ul>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=101&txt=Example+1&w=400&h=300" />
</li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=101&txt=Example+2&w=400&h=300" />
</li>
<li>
<img src="https://placeholdit.imgix.net/~text?txtsize=101&txt=Example+3&w=400&h=300" />
</li>
</ul>
</div>
</div>
<div class="carousel-info">
<div class="container">
<ul>
<li class="slick-current">
<div class="c-header">About Us</div>
<div class="c-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<div class="c-header">Others</div>
<div class="c-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<div class="c-header">Main</div>
<div class="c-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
</ul>
</div>
</div>
</div>