Twitter Bootstrap Question posted in

Why does not work properly my window.width method? – Twitter bootstrap

I have a small responsive banner project with jquery and I recreate my banner on responsive for tablet and mobile but my if condition is not working properly.

On tablet: tabletSlider(); must work
on mobile: mobileSlider(); must work
on web: webSlider(); must work again but only tabletSlider(); is working if you check it out on tablet resulotion.

// Web banner
function webSlider() {
  var sources = $('#mycarousel .item img').map(function() {
    return $(this).data('web-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;

  if (vn > large) {
    webSlider();
  } else if (vn < tablet) {
    tabletSlider();
  } else if (vn < mobil) {
    mobileSlider();
  }


}

$(document).ready(function() {
  sliderControl();
})
#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;
}
<!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 web-banner" role="listbox">
        <div class="item active">
          <img src="https://unsplash.it/1000/300?image=68" data-web-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-web-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-web-src="https://unsplash.it/1000/300?image=80" data-tablet-src="https://unsplash.it/1000/300?image=84">
        </div>
      </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-3.1.0.js"></script>
  <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>

Demo on Jsbin

Tags:

2

Answers


  1. 0

    Try rewriting your if-statement like so:

    if (vn < mobil) {
    mobileSlider();
} else if (vn < tablet) {
    tabletSlider();
} else {
    webSlider();
}

    This will prevent the tablet-slider to show on mobile, and if the width is not below tablet or mobile, it will show the web-slider

    Login or Signup to reply.
  2. 0

    Update your if-else condition as:

      if (vn > large) {
      webSlider();
  } else if (vn < tablet && vn > mobil) { 
  // Need to check that vn should be greater than mobile
  // and should be less than tablet
      tabletSlider();
  } else if (vn < mobil) {
      mobileSlider();
  }

    Check this JSFiddle and watch console logs. It is firing your functions as per your specified width accordingly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search