CODEWITHSUNDEEP
javascripthtmlsliderslide.js
Fal-Cone
Fal-Cone

Reputation: 345

Div displays half of itself twice - using swipe.js

Trying to find a slider library that I don't need jQuery to operate. I have two images of different widths inside the same swipejs container as per the demo, 

<div id='mSwipe' style='background-color:#ffb6c1;width:300px;height:250px;position:relative; left:800px;' class='swipe'>
  <div id="swipewrape" class='swipe-wrap'>
    <div id="slideone" style="text-align:right;"><img src="http://www.totallygaming.com/sites/default/files/rotor/Commercial%20Intelligence.JPG"/></div>
    <div id="slidetwo" style="text-align:right;"><img src="http://in-formatio.com/wp-content/uploads/2012/02/ihop-free-pancake-day-20091-600x250.jpg"/></div>
  </div>
</div>
<div style='text-align:center;padding-top:20px;'>
  <button onclick='state_change();mySwipe.prev()'>prev</button>
  <button onclick='state_change();mySwipe.next()'>next</button>
</div>

<script>
var state = 0;
function state_change() //Dumb state change function
{
   if(state)
   {
      state = 0;
      document.getElementById('mSwipe').style.width = "300px";
   }
   else
   {
     state = 1;
     document.getElementById('mSwipe').style.width = "600px";

   }
}

I put in a simple little two-state state machine to see what I can do if I change the div-width before the slide effect kicks in. I put the size change in the callback methods include in swipejs at first to no avail. I just want to change the div size each time I push the button so the image coming in fits in it

On button presses, the div will resize to the right size, but it seems like for the big image (which is a stack of delcious pancakes), it'll slide over and display the half of the large image twice in the swipe div. I can change back to the smaller image just fine

If I open my chrome console, the full image shows, and I have no further problems.

What's up with that?

enter image description here

Upvotes: 2

Views: 2628

Answers (1)

Thanos
Thanos

Reputation: 3059

Cone,

I have changed your code a little bit and created a fiddle for you below. Also giving you the jQuery commands on the Javascript commented out in case you change your mind about jQuery later on.

JavaScript

// pure JS
var elem = document.getElementById('slider');
window.mySwipe1 = Swipe(elem, {
    // startSlide: 4,
    // auto: 3000,
    continuous: true,
    // disableScroll: true,
    // stopPropagation: true,
    // callback: function(index, element) {},
    // transitionEnd: function(index, element) {}
});
// with jQuery
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');

HTML

<div id='slider' class='swipe'>
    <div class='swipe-wrap'>
        <div>
            <img src="http://www.totallygaming.com/sites/default/files/rotor/Commercial%20Intelligence.JPG" />
        </div>
        <div>
            <img src="http://in-formatio.com/wp-content/uploads/2012/02/ihop-free-pancake-day-20091-600x250.jpg" />
        </div>
    </div>
</div>
<div style='text-align:center;padding-top:20px;'>
    <button class='prev' onclick='mySwipe1.prev()'>prev</button>
    <button class='next' onclick='mySwipe1.next()'>next</button>
</div>

CSS

.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
}
.swipe-wrap {
    overflow: hidden;
    position: relative;
}
.swipe-wrap > div {
    float:left;
    width:100%;
    position: relative;
}
.swipe-wrap > div > img {
    margin:10%;
    width:90%;
}
#slider {
    height: auto;
    width:50%;
    left:200px;
}

EXAMPLE

EDIT: Updated the fiddle, added the original image size

EXAMPLE 2

Upvotes: 3

Related Questions