How to create android like swipe tabs in html?

How to create android like swipe tabs in html? - javascript

How to create the following tabs using javascript/jquery?
I have attempted to make this using slick.js but every time I swipe the tabs, slick registers it as a click and loads the content of the tab I just touched. How can I eliminate this?
$(function() {
'use strict';
$('.pageFoot').slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.pageContent',
arrows: false,
infinite: false,
focusOnSelect: true,
centerMode: true,
swipeToSlide: true,
touchThreshold: 10,
});
$('.pageContent').slick({
slidesToShow: 1,
slidesToScroll: 1,
asNavFor: '.pageFoot',
arrows: false,
infinite: false,
swipeToSlide: true,
touchThreshold: 10
});
});
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
display: grid;
grid-template-rows: 10vh 90vh;
}
.pageFoot {
height: 10vh;
width: 100vw;
}
.pageFootItem {
height: 10vh!important;
}
.pageContent,
.pageContentItem {
height: 90vh!important;
width: 100vw;
}
.pageFootItem.slick-current {
box-shadow: inset 0 -5px aqua;
color: aqua;
}
<head>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
</head>
<body>
<div class="pageFoot">
<div class='pageFootItem'>Intro</div>
<div class='pageFootItem'>T01</div>
<div class='pageFootItem'>T02</div>
<div class='pageFootItem'>T03</div>
<div class='pageFootItem'>T04</div>
<div class='pageFootItem'>T05</div>
<div class='pageFootItem'>T06</div>
<div class='pageFootItem'>T07</div>
<div class='pageFootItem'>T08</div>
<div class='pageFootItem'>T09</div>
<div class='pageFootItem'>T10</div>
<div class='pageFootItem'>T11</div>
<div class='pageFootItem'>T12</div>
<div class='pageFootItem'>T13</div>
<div class='pageFootItem'>T14</div>
<div class='pageFootItem'>T15</div>
<div class='pageFootItem'>T16</div>
<div class='pageFootItem'>T17</div>
<div class='pageFootItem'>T18</div>
<div class='pageFootItem'>T19</div>
<div class='pageFootItem'>T20</div>
</div>
<div class="pageContent">
<div class="pageContentItem">Content1</div>
<div class="pageContentItem">Content2</div>
<div class="pageContentItem">Content3</div>
<div class="pageContentItem">Content4</div>
<div class="pageContentItem">Content5</div>
<div class="pageContentItem">Content6</div>
<div class="pageContentItem">Content7</div>
<div class="pageContentItem">Content8</div>
<div class="pageContentItem">Content9</div>
<div class="pageContentItem">Content10</div>
<div class="pageContentItem">Content11</div>
<div class="pageContentItem">Content12</div>
<div class="pageContentItem">Content13</div>
<div class="pageContentItem">Content14</div>
<div class="pageContentItem">Content15</div>
<div class="pageContentItem">Content16</div>
<div class="pageContentItem">Content17</div>
<div class="pageContentItem">Content18</div>
<div class="pageContentItem">Content19</div>
<div class="pageContentItem">Content20</div>
</div>
</body>
As slick.js library isn't free for commercial use, is there any other way of achieving this?

You can achieve that using css with overflowX: scroll.

You can use just html and css to get a result like you want:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.slider {
width: 300px;
background: #f1565a;
overflow: hidden;
}
.slider ul {
white-space: nowrap;
overflow-x: scroll;
}
.slider ul::-webkit-scrollbar {
height: 2px;
}
.slider ul::-webkit-scrollbar-track {
background: rgba(255,255,255, 0.5);
}
.slider ul::-webkit-scrollbar-thumb {
background: rgba(255,255,255, 0.8);
}
.slider ul li {
display: inline-block;
font-family: sans-serif;
padding: 10px;
color: #fff;
}
<div class="slider">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
Now, if you need, you can implements js to make arrows. :)

Related

Numbering visible items in with Slick carousel

I am using the slick.js to show a grid of 6 items (2 rows, 3 column) per slide. I need normal prev and next arrow navigation, but also wish to display the active item count as a form of pagination help.
So if on the second slide, the text should read 'Showing 7 - 12 of x results'. I can only find ways to show slide number, not item, and this text needs to update whenever the slides are navigated through.
Unless there is a slick option that I haven't found, I'd have to loop through all the items, indexing them all with numbers and find what ones have the parent class '.slick-active'. But I haven't been successful.
I'm also struggling to show the total items, as the closest thing slick seems to offer is slidecount, but that's related to the slides, not the items within.
One catch is these items won't always be a perfect multiple of 6, so the last page is likely to have less than 6 items.
Codepen attached. Many thanks!
$('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $('.prev'),
nextArrow: $('.next')
});
.item {
background: silver;
color: black;
text-align: center;
font-size: 30px;
display: inline;
border: 5px solid white;
}
.nav {
width: 100%;
}
.nav p{
width: 50%;
float: left;
display: block;
text-align: center;
}
.results {
text-align: center;
width: 100%;
padding-top: 10px
}
<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.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>

Here is an Demo using init and afterChange events
Note: Instead of html() use data() wherever possible
$('.carousel').on('init afterChange', function(event, slick, currentSlide){
let total = $('.carousel .item').length;
let start = $('.carousel .slick-active:first .item:first').html();
let end = $('.carousel .slick-active:last .item:last').html();
$('.results').html(`Showing ${start} to ${end} of ${total} results`)
})
$('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $('.prev'),
nextArrow: $('.next')
})
.item {
background: silver;
color: black;
text-align: center;
font-size: 30px;
display: inline;
border: 5px solid white;
}
.nav {
width: 100%;
}
.nav p{
width: 50%;
float: left;
display: block;
text-align: center;
}
.results {
text-align: center;
width: 100%;
padding-top: 10px
}
<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.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>

I have modified Aswin's answer to display currently active index of the visible slides, instead of reading data/html attribute.
$('.carousel').on('init afterChange', function(event, slick, currentSlide){
let total = $('.carousel .item').length;
var first = $('.slick-active:first > div:first').get(0);
var last = $('.slick-active:last > div:last').get(0);
if($(last).html() == '')
last = $('.slick-active:last > div:not(:empty)').get(0);
let start,end;
$('.slick-slide > div').each(function(i,v){
if(first === $(v).get(0)) {
start = i+1;
}
if(last === $(v).get(0)) {
end = i+1;
}
});
$('.results').html(`Showing ${start} to ${end} of ${total} results`)
})
$('.carousel').slick({
rows: 2,
slidesToShow: 3,
slidesToScroll: 3,
autoplay: false,
arrows: true,
infinite: false,
draggable: false,
prevArrow: $('.prev'),
nextArrow: $('.next')
})
.item {
background: silver;
color: black;
text-align: center;
font-size: 30px;
display: inline;
border: 5px solid white;
}
.nav {
width: 100%;
}
.nav p{
width: 50%;
float: left;
display: block;
text-align: center;
}
.results {
text-align: center;
width: 100%;
padding-top: 10px
}
<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.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<div class="carousel">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
</div>
<div class="nav">
<p class="prev">prev</p>
<p class="next">next</p>
</div>
<div class="results">
Showing 1 to 9 of [total] results
</div>

CSS: Overflow:hidden not working on full screen

I've added the below slider (photo with text) code to my blogger html/javascript gadget. I want the slider to show the main testimonial in the middle and 2 cropped testimonials on the left and the right.
The code was supposed to look like this: https://i.imgur.com/eGM4h33.png
But it ended up like this: https://i.imgur.com/uZldIjd.png
Any idea how the issue can be solved? Here's the code:
jQuery(document).ready(function($) {
"use strict";
$('#customers-testimonials').owlCarousel({
loop: true,
center: true,
items: 3,
margin: 2,
autoplay: false,
dots: true,
nav: true,
autoplayTimeout: 8500,
smartSpeed: 450,
navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
responsive: {
0: {
items: 1
},
768: {
items: 2
},
1170: {
items: 3
}
}
});
});
.testimonials {
position: relative;
overflow: hidden;
padding-top: 10px;
}
#customers-testimonials .item-details {
background-color: #F7F6F6;
color: #4A4A51;
padding: 0.5em 0.5em;
text-align: left;
}
#customers-testimonials .item-details h5 {
margin: 0 0 0.2em;
font-size: 1em;
line-height: 1em;
}
#customers-testimonials .item-details h5 span {
color: red;
float: right;
padding-right: 0.2em;
}
#customers-testimonials .item-details p {
font-size: 1em;
}
#customers-testimonials .item {
text-align: center;
margin-bottom: 10px;
}
.owl-carousel .owl-nav [class*='owl-'] {
transition: all .3s ease;
}
.owl-carousel .owl-nav [class*='owl-'].disabled:hover {
background-color: #D6D6D6;
}
.owl-carousel {
position: relative;
}
.owl-carousel .owl-next,
.owl-carousel .owl-prev {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
position: absolute;
top: 30%;
font-size: 20px;
color: #000;
border: 1px solid #000;
text-align: center;
}
.owl-carousel .owl-prev {
left: 10px;
}
.owl-carousel .owl-next {
right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="http://themes.audemedia.com/html/goodgrowth/css/owl.theme.default.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' />
<!-- TESTIMONIALS -->
<section class="testimonials">
<div class="container" style="padding:0">
<div class="row">
<div class="col-sm-12">
<div id="customers-testimonials" class="owl-carousel">
<!--TESTIMONIAL 1 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/spaghetti-with-carbonara-sauce_1216-324.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 1 -->
<!--TESTIMONIAL 2 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/spaghetti-with-carbonara-sauce_1216-324.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 2 -->
<!--TESTIMONIAL 3 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/spaghetti-with-carbonara-sauce_1216-324.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 3 -->
</div>
</div>
</div>
</div>
</section>
<!-- END OF TESTIMONIALS -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/owl.carousel.min.js'>
</script>

CSS z-index is not working with element which parent has transform:translate3d

Environment
Browser: Chrome Version 69.0.3497.92 (Official Build) (64-bit)
Components: ganlanyuan/tiny-slider found here
Background:
I have a slider created using tiny-slider. It works well. Also on the same page, I have an overlay div which overlays the whole page.
The Issue:
The exact problem is, On my slider I have an element (I am calling it the active element) which should be seen over the 'overlay' layer. Which means all other slider item should be under the overlay except the active element.
I am giving the overlay z-index: 999 and active item z-index: 9999.
Technically we expect that the active comes in front of the overlay. But it doesn't.
What I Expect to get:
What I actually get:
I am aware of that this issue is because the slider uses transform:translate3d to move the items left and right which is canceling the z-index.
I have read most solutions that I found on google but no luck.
I regenerated this problem on codepen. here is the link https://codepen.io/peshraw-h-ahmed/pen/pOZNdg.
Is there any solution for that problem? Can anyone tell me where the problem is and fix it inside the codepen snippet.
The Codes:
tns({
"container": ".base",
"items": 4,
autoplay: false,
"nav": false,
"slideBy": "page",
"mouseDrag": true,
"swipeAngle": false,
"speed": 400
})
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
z-index: 999;
}
.item {
background: #e67e22;
height: 450px;
color: #fff;
border: 1px solid;
}
.item.active {
z-index: 9999;
background: #2c3e50;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.6/tiny-slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.6/min/tiny-slider.js"></script>
<div class="base">
<div class="item">Item</div>
<div class="item active">Active Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>
<div class="overlay">
Overlay
</div>

You can change the overlay so it belong to the stacking context generated by the transform and you will be able to make the active element above it:
tns({
"container": ".base",
"items": 4,
autoplay: false,
"nav": false,
"slideBy": "page",
"mouseDrag": true,
"swipeAngle": false,
"speed": 400
})
/*the Overlay*/
.base:before {
content:"";
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
z-index: 999;
}
/**/
.item {
background: #e67e22;
height: 450px;
color: #fff;
border: 1px solid;
position:relative;
}
.item.active {
z-index: 9999;
background: #2c3e50;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.6/tiny-slider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.6/min/tiny-slider.js"></script>
<div class="base">
<div class="item">Item</div>
<div class="item active">Active Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
<div class="item">Item</div>
</div>

How to conditionally add next and prev arrows based on slick carousel width?

I am attempting to add the next and prev arrows for the Slick Carousel (latest version) conditionally when the content takes up more space then the outer container (<div class="container">).
Example:
Content fits inside container (expected results)
Content does not fit inside container (expected results)
Goal:
If the content overflows beyond the container then add the arrows else do not
Here is what I have setup but it does not work to add the arrows conditionally.
This code highlights the current results and issue.
I have attempted to use the responsive setting but that will always add the arrows if the breakpoint is met, which is not what i want
$(function() {
$('.carousel').slick({
focusOnSelect: true,
arrows: true,
infinite: false,
variableWidth: true,
prevArrow: '<div class="prev-arrow"><i class="fa fa-angle-left fa-2x" aria-hidden="true"></i></div>',
nextArrow: '<div class="next-arrow"><i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>',
});
});
.carousel {
color: black;
display: block;
}
.carousel .item {
border: 1px solid white;
margin: 0 10px;
padding: 5px;
}
.slick-list {
width: auto;
margin: 0 auto;
height: auto;
}
.item.slick-current {
border-bottom: 2px solid black;
}
.prev-arrow {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
.next-arrow {
position: absolute;
right: 0;
z-index: 10;
top: 0;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel">
<div class="item">
tab 1
</div>
<div class="item">
tab 2
</div>
<div class="item">
tab 3
</div>
<div class="item">
tab 4
</div>
<div class="item">
tab 5
</div>
<div class="item">
tab 6
</div>
</div>
</div>
</div>
</div>
Current output:

I found the answer to this.
$(function() {
$('.carousel').slick({
focusOnSelect: true,
arrows: true,
infinite: false,
variableWidth: true,
slidesToShow: 5,
prevArrow: '<div class="prev-arrow"><i class="fa fa-angle-left fa-2x" aria-hidden="true"></i></div>',
nextArrow: '<div class="next-arrow"><i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></div>',
});
var childrenWidth = 0;
$('.carousel .slick-track').children().each(function() {
childrenWidth += $(this).width();
});
var outerContainerWidth = $('.carousel').width();
if(childrenWidth < outerContainerWidth) {
var nextArrow = $('.next-arrow');
if(!(nextArrow.hasClass('slick-disabled'))) {
nextArrow.addClass('slick-disabled');
}
}
});
.carousel {
color: black;
display: block;
}
.carousel .item {
border: 1px solid white;
margin: 0 10px;
padding: 5px;
}
.slick-list {
width: auto;
margin: 0 auto;
height: auto;
}
.item.slick-current {
border-bottom: 2px solid black;
}
.prev-arrow {
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
.next-arrow {
position: absolute;
right: 0;
z-index: 10;
top: 0;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel">
<div class="item">
tab number 1
</div>
<div class="item">
tab number 2
</div>
<div class="item">
tab number 3
</div>
<div class="item">
tab number 4
</div>
<div class="item">
tab number 5
</div>
<div class="item">
tab number 6
</div>
</div>
</div>
</div>
</div>

Show Link on image at hovering in jquery

I'm using Bootstrap 3 and jQuery 1.9.1 to make a website where profile picture is shown in a <li> tag. I want to show the link of "Update Image" when I'm hovering over the image. So far I've managed to fade the image on hovering but I'm unable to show a link or text on hovering over image. Here are my codes,
JQUERY
$(function () {
$(".img-profile").hover(
function () {
$(this).fadeTo(200, 0.45);
},
function () {
$(this).fadeTo(200, 1);
});
});
CSS
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
}
HTML
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="myimage.png" alt="profile_pic" />
</li>
</ul>
</div>
</div>
I've searched other sources but none of them works since it'll bug my own css styles. How can I show a link at the middle of the image on hovering? Need this help badly! Thanks.

Hope, if you want to do it without Jquery - even though if you want to manage it using jquery, it can also be done.. not a big issue
.img-profile {
margin-top: 10px;
width: 200px;
/* if image is bigger it will adjust according to parent width */
height: 250px;
display: inline-block;
}
.img-wrap {
display: inline-block;
position: relative;
}
.img-wrap:hover .img-profile {
opacity: 0.5;
}
.img-wrap .hover-div {
display: none;
position: absolute;
text-align: center;
top: 50%;
left: 0;
right: 0;
margin-top: -10px;
z-index: 10;
/* width of image container */
}
.img-wrap:hover .hover-div {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="img-wrap">
<img class="img-responsive img-rounded img-profile center-block" src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="profile_pic" />
<div class="hover-div">Update Image
</div>
</li>
</ul>
</div>
</div>

Yoy should try this. that is exactly you want.
$(function () {
$(".img-profile").hover(
function () {
$(this).fadeTo(200, 0.45);
$(this).closest("li").find("a").show();
},
function () {
$(this).fadeTo(200, 1);
$(this).closest("li").find("a").hide();
});
})
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="https://i.stack.imgur.com/TwJmm.gif?s=328&g=1" alt="profile_pic" />Link that you want
</li>
</ul>
</div>
</div>

you can achieve all that using css alone.
html
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="myimage.png" alt="profile_pic" />
<p class="text">change profile picture</p>
</li>
</ul>
css
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
opacity: 1.0;
filter:alpha(opacity=100);
}
.text {
display: none;
}
img-profile:hover {
opacity: 0.45;
filter:alpha(opacity=45);
}
img-profile:hover + .text {
display: block;
}
check this fiddle

HTML
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Colossoma_macropomum_01.jpg/800px-Colossoma_macropomum_01.jpg" alt="profile_pic" />
Update Image
</li>
</ul>
</div>
</div>
CSS
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
}
#side-menu li a{
display:none;
}
#side-menu li:hover a#update{
display:block;
}
JS
$(function () {
$(".img-profile").hover(
function () {
$(this).fadeTo(200, 0.45);
},
function () {
$(this).fadeTo(200, 1);
});
});

We Keep Coding

JavaScript is the programming language of the Web.

How to create android like swipe tabs in html? - javascript

You can achieve that using css with overflowX: scroll.

Related

Numbering visible items in with Slick carousel

CSS: Overflow:hidden not working on full screen

CSS z-index is not working with element which parent has transform:translate3d

How to conditionally add next and prev arrows based on slick carousel width?

Show Link on image at hovering in jquery

Categories

Resources