Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
</head>
<body>
<div class="tabs">
                <ul class="tabs__controls flex-row">
                    <li class="tabs__controls-item active" data-class="first">
                        <a href="#" class="tabs__controls-link">
                            Item 1
                        </a>
                    </li>
                    <li class="tabs__controls-item" data-class="second">
                        <a href="#" class="tabs__controls-link">
                            Item 2
                        </a>
                    </li>
                    <li class="tabs__controls-item" data-class="third">
                        <a href="#" class="tabs__controls-link">
                            Item 3
                        </a>
                    </li>
                </ul>
                <ul class="tab__list">
                    <li class="tabs__item active tab__list-first">
                        <p><span>Content 1. </span><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, doloribus.</p>
                    </li>
                    <li class="tabs__item tab__list-second">
                        <div class="slick-slider">
                          <div class="slick__item">
                            <img src="http://i57.tinypic.com/2enngaa.jpg" alt="">
                          </div>
                          <div class="slick__item">
                            <img src="http://i57.tinypic.com/2enngaa.jpg" alt="">
                          </div>
                          <div class="slick__item"><img src="http://i57.tinypic.com/2enngaa.jpg" alt=""></div>
                          <div class="slick__item"><img src="http://i57.tinypic.com/2enngaa.jpg" alt=""></div>
                          <div class="slick__item"><img src="http://i57.tinypic.com/2enngaa.jpg" alt=""></div>
                        </div>
                    </li>
                    <li class="tabs__item tab__list-third">
                        <p><span>Content 3. </span><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, itaque!</p>
                    </li>
                </ul>
            </div>
</body>
</html>
 
.tabs {
    max-width: 500px;
    width: 100%;
    margin: 20px auto;
    position: relative;
}
.tabs__controls-item {
    display: inline-block;
    vertical-align: middle;
    width: 32%; 
}
.tabs__controls-link {
    display: block;
    padding: 10px 10px;
    font-size: 15px;
    line-height: 1.5;
    text-transform: lowercase;
    text-align: center;
    color: #111;
    width: 100%;
​
    -webkit-transition: all .27s ease-in-out;
         -o-transition: all .27s ease-in-out;
            transition: all .27s ease-in-out;
}
.active .tabs__controls-link,
.tabs__controls-link:hover {
    background: #ccc;
}
​
.tab__list {
    margin: 4px 0;
}
.tabs__item.active {
    display: block;
}
.tabs__item {
    display: none;
    background: #eee;
    padding: 20px 25px;
}
.tabs__item p {
    font-size: 14px;
    line-height: 24px;
}
.tabs__item p span {
    text-transform: uppercase;
    font-weight: bold;
}
​
.slick__item {
  padding: 10px;
}
​
img {
  max-width: 100%;
    width: 100%;
    height: inherit;
}
 
//  Tabs 
    $('.tabs__controls-link').on('click', function(e){
        e.preventDefault();
        console.log('Tab button On click! \n');
​
        var item = $(this).closest('.tabs__controls-item'),
            contentItem = $('.tabs__item'),
            itemPos = item.data('class');
        
        contentItem.filter('.tab__list-'+itemPos)
            .add(item)
            .addClass('active')
            .siblings()
            .removeClass('active');
      
      $('.slick-slider').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 7000,
        infinite: true
    });
    });
​
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
lime7pro
0viewers