title: Jcarousel basic, make it responsive
body: <p>i have a jcarousel slider on my webpage, the basic version ( the one with only one image display ), i can't seems to resize with media queries the div the jcarousel slider. </p>
  
  <p>Here is the HTML CODE </p>
  
  <pre><code>&lt;div id="mycarousel"&gt;
  &lt;div class="wrapper"&gt;
  
  
  &lt;div class="jcarousel-wrapper"&gt;
  &lt;div class="jcarousel"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;img src="img/macu/slide1.png" width="700" height="500" alt=""&gt;&lt;/li&gt;
  
  
  &lt;li&gt;&lt;img src="img/macu/slide5.png" width="700" height="500" alt=""&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  /div&gt;
  
  &lt;a href="#" class="jcarousel-control-prev"&gt;&lt;/a&gt; 
  &lt;a href="#" class="jcarousel-control-next"&gt;&lt;/a&gt;
  
  &lt;!--
  &lt;a href="#" class="jcarousel-control-prev"&gt;&amp;lsaquo;&lt;/a&gt; 
  &lt;a href="#" class="jcarousel-control-next"&gt;&amp;rsaquo;&lt;/a&gt;
  --&gt;
  &lt;!--  &lt;p class="jcarousel-pagination"&gt; --&gt;
  &lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is my css </p>
  
  <pre><code>@media screen and (max-width:545px){
  //body {background:orange;}
  #content {
  width:43%;
  height:auto;
  }
  
  #media,#vignette {
  width:auto;
  height:auto;
  
  }
  #menu {
  width:32%;
  font-size:80%;
  }
  
  .jcarousel{
  width:22%;
  //font-size:80%;
  }
  
  }
  </code></pre>
  
  <p>here is the js</p>
  
  <pre><code>(function($) {
  $(function() {
      $('.jcarousel').jcarousel();
  
  
  
  
  
  
  
      $('.jcarousel-control-prev')
          .on('jcarouselcontrol:active', function() {
              $(this).removeClass('inactive');
          })
          .on('jcarouselcontrol:inactive', function() {
              $(this).addClass('inactive');
          })
          .jcarouselControl({
              target: '-=1'
          });
  
      $('.jcarousel-control-next')
          .on('jcarouselcontrol:active', function() {
              $(this).removeClass('inactive');
          })
          .on('jcarouselcontrol:inactive', function() {
              $(this).addClass('inactive');
          })
          .jcarouselControl({
              target: '+=1'
          });
  
      $('.jcarousel-pagination')
          .on('jcarouselpagination:active', 'a', function() {
              $(this).addClass('active');
          })
          .on('jcarouselpagination:inactive', 'a', function() {
              $(this).removeClass('active');
          })
          .jcarouselPagination();
  });
  
  
  
  
  
  })(jQuery);
  </code></pre>
  
  <p>Do i have to change anything in the js ? i find out there is a responsive jcarousel but it show 3 pictures at the same time ...
  <a href="http://sorgalla.com/jcarousel/examples/responsive/" rel="nofollow">http://sorgalla.com/jcarousel/examples/responsive/</a></p>
  
  <p>Thanks you :) </p>