The slides appear flush left in the container


#1

I have tried several things but still the image slides appear flush left in the container.
When I add, for example left: 5px; the image is pushed out of the container, to the right in a responsive view.

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width:1090px; height: 425px;">
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width:1090px; height: 400px;">
<div><a href="{{LINK videos/category/5}}"><img data-u="image" src="images/image1.png">
</a></div>

Any suggestions will be welcomed


#2

There’s not really enough code to give a full answer but if you are moving that absolute div left by 5px then in turn you would need to reduce its width by 10px to have a gap on both sides.

Alternatively remove the width from the absolute element and use left:5px and right:5px at the same time.

Of course that does not take into account anything else that might be going on that we don’t know about. :slight_smile:


#3

Thanks for your reply.
Removing the width and adding left and right makes the responsive view of the image perfectly aligned, but still flush left in the desktop view, like so:
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left:0px; right: 0px; height: 400px;">

When I added a left size it creates the responsive view of the image to appear flush right.

The container that the div id=“slider1_container” is in, simply has background-color:

	        .box12-1 {
	         background-color: #b7b7b7;
	}

any more guidance will be appreciated


#4

We don’t have the code for that element so are probably missing a part of the picture. :slight_smile: I can only comment on the code provided.

Yes that would be as expected but you said you wanted it 5px from the right and 5px from the left and if so then you should use left: 5px and right:5px as mentioned above.

e.g.

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width:1090px; height: 425px;background:red;">
  <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 5px;right:5px; top: 0px;  height: 400px;background:blue;">
    <div><a href="{{LINK videos/category/5}}"><img data-u="image" src="images/image1.png"> </a></div>
  </div>
</div>

The above will move the inner div 5px away from the outer div on both sides.

If you meant you wanted 5px space inside the div (that has an attribute of u=“slides”) then you could do that with some padding. instead which will move any inner elements.

e.g.

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width:1090px; height: 425px;background:red;">
  <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0;right:0;padding:0 5px; top: 0px;  height: 400px;background:blue;">
    <div><a href="{{LINK videos/category/5}}"><img data-u="image" src="images/image1.png"> </a></div>
  </div>
</div>

But as I said in my first post if you have extra styles being placed on perhaps an image that is inside that container we would need to see what those styles were.

I think we may need to see the bigger picture to give you the answer you are looking for :slight_smile:


#5

Thanks again for your reply.
I didn’t necessarily want 5px on each side, I’m just looking for centering in all views.
I tried adding the suggested padding, without success. The image still appears flush left.

The only code I haven’t provided is the slider script code:

<script>
    jQuery(document).ready(function($) {
    //Define an array of slideshow transition code
    var _SlideshowTransitions = [{
            $Duration: 8000,
            x: 0.3,
            $Rows: 2,
            $During: {
                $Left: [0.3, 0.7]
            },
            $ChessMode: {
                $Row: 3
            },
            $Easing: {
                $Left: $JssorEasing$.$EaseInCubic,
                $Opacity: $JssorEasing$.$EaseLinear
            },
            $Opacity: 2
        },
        {
            $Duration: 8000,
            $Delay: 120,
            $Cols: 8,
            $Rows: 4,
            $Clip: 15,
            $Formation: $JssorSlideshowFormations$.$FormationStraightStairs,
            $Easing: $JssorEasing$.$EaseInQuad,
            $Assembly: 2050
        },
        {
            $Duration: 8000,
            $Rows: 6,
            $Delay: 120,
            $Clip: 4
        },
        {
            $Duration: 8000,
            x: -1,
            y: 1,
            $Delay: 120,
            $Cols: 8,
            $Rows: 4,
            $Formation: $JssorSlideshowFormations$.$FormationStraightStairs,
            $Easing: {
                $Left: $JssorEasing$.$EaseInQuart,
                $Top: $JssorEasing$.$EaseInQuart,
                $Opacity: $JssorEasing$.$EaseLinear
            },
            $Opacity: 2
        },
        {
            $Duration: 8000,
            y: -1,
            $Cols: 12,
            $Delay: 120,
            $Formation: $JssorSlideshowFormations$.$FormationStraight,
            $ChessMode: {
                $Column: 12
            }
        },
        {
            $Duration: 8000,
            x: 1,
            $Rows: 2,
            $Delay: 120,
            $ChessMode: {
                $Row: 3
            },
            $Easing: {
                $Left: $JssorEasing$.$EaseInOutQuart,
                $Opacity: $JssorEasing$.$EaseLinear
            },
            $Opacity: 2,
            $Brother: {
                $Duration: 1600,
                x: -1,
                $Rows: 2,
                $ChessMode: {
                    $Row: 3
                },
                $Easing: {
                    $Left: $JssorEasing$.$EaseInOutQuart,
                    $Opacity: $JssorEasing$.$EaseLinear
                },
                $Opacity: 2
            }
        },
    ];
    var options = {
        $FillMode: 2,
        $Idle: 12000,
        $AutoPlay: true,
        $SlideshowOptions: {
            $Class: $JssorSlideshowRunner$,
            $Transitions: _SlideshowTransitions,
            $TransitionsOrder: 1,
        }
    };
    var jssor_slider1 = new $JssorSlider$('slider1_container', options);

    //responsive code begin
    //you can remove responsive code if you don't want the slider scales while window resizing

    var MAX_WIDTH = 1060;

    function ScaleSlider() {
        var containerElement = jssor_slider1.$Elmt.parentNode;
        var containerWidth = containerElement.clientWidth;

        console.log(containerElement);

        if (containerWidth) {
            console.log('activated');
            var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);

            jssor_slider1.$ScaleWidth(expectedWidth);
        } else {
            window.setTimeout(ScaleSlider, 30);
        }
    }
    ScaleSlider();

    $(window).bind("load", ScaleSlider);
    $(window).bind("resize", ScaleSlider);
    $(window).bind("orientationchange", ScaleSlider);
    //responsive code end
});

#6

If you mean you just want the layout centred then adding margin:auto to the slider container will do that.

If that’s what you meant :slight_smile:


#7

Thanks again for your reply.
I’d like the image not to be flush left, but centered in the container.
However, margin:auto in slider1_container, doesn’t accomplish it.
any other help is appreciated


#8

If the container is now centred but the image is not then you can try this.

#slider1_container img {display:block;margin:auto;}

If we are not getting close to what you want then maybe you can make a reduced demo or codepen etc. I’m sure it’s a straight forward fix but I’m probably missing the target :slight_smile:


#9

Thanks again for your reply.

That was the solution

Much thanks