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>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
​
​
<div class="container">
    <div id="mycarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
    <li data-target="#mycarousel" data-slide-to="1"></li>
    <li data-target="#mycarousel" data-slide-to="2"></li>
    <li data-target="#mycarousel" data-slide-to="3"></li>
    <li data-target="#mycarousel" data-slide-to="4"></li>
  </ol>
​
  <!-- Wrapper for slides -->
  <div class="carousel-inner main-role-banner" role="listbox">
    <div class="item active">
        <img src="https://unsplash.it/1000/300?image=68" data-tablet-src=" https://unsplash.it/1000/300?image=21" data-mobile-src="https://unsplash.it/500/600?image=1">
    </div>
    <div class="item">
        <img src="https://unsplash.it/1000/300?image=43"  data-tablet-src="https://unsplash.it/1000/300?image=1001" data-mobile-src="https://unsplash.it/500/600?image=2">
    </div>
    <div class="item">
        <img src="https://unsplash.it/1000/300?image=67" >
    </div>
    <div class="item">
        <img src="https://unsplash.it/1000/300?image=47" data-tablet-src="https://unsplash.it/1000/300?image=1005">
    </div>
    <div class="item">
        <img src="https://unsplash.it/1000/300?image=72" data-mobile-src="https://unsplash.it/500/600?image=3" >
    </div>
    <div class="item">
        <img src="https://unsplash.it/1000/300?image=80" data-tablet-src="https://unsplash.it/1000/300?image=84">
    </div>
  </div>
​
    <div class="carousel-inner web-banner" role="listbox"></div>
    <div class="carousel-inner tablet-banner" role="listbox"></div>
    <div class="carousel-inner mobile-banner" role="listbox"></div>
  <!-- Controls -->
  <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
​
</div>
    
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
​
</body>
</html>
 
#mycarousel{
    height:400px;
}
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img
{
    height:400px;
    width:100%;
}
.divs{
    width:300px;
    margin:20px;
}
 
$(".main-role-banner").remove();
// Web banner
function webSlider(){
​
    var sources = $('#mycarousel .item img').map(function() {
    return $(this).attr('src');
});
​
$.each(sources, function(index, value) {
 //$(".tablet-banner,.mobile-banner").remove();
  $(".web-banner").append("<div class='item'><img src='"+value+"'></div>");
  $('.web-banner').find('.item:first-child').addClass('active');
})
  
  
​
}
​
​
// Tablet banner
function tabletSlider(){
    var sources = $('#mycarousel .item img').map(function() {
    return $(this).data('tablet-src');
});
​
  $.each(sources, function(index, value) {
    //$(".web-banner").remove();
    $(".tablet-banner").append("<div class='item'><img src='"+value+"'></div>");
    $('.tablet-banner').find('.item:first-child').addClass('active');
  })
  
};
​
// Mobile banner
function mobileSlider(){
    var sources = $('#mycarousel .item img').map(function() {
    return $(this).data('mobile-src');
});
​
  $.each(sources, function(index, value) {
    //$(".tablet-banner,.web-banner").remove();
    $(".mobile-banner").append("<div class='item'><img src='"+value+"'></div>");
    $('.mobile-banner').find('.item:first-child').addClass('active');
  })
  
};
​
​
//$(window).on('resize',sliderControl)
​
function sliderControl(){
    var vn = $(window).width();
    var large = 1024;
    var tablet = 767;
    var mobil = 480;
    
    
  
}
​
$(document).ready(function(){
  webSlider();
})
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers