Change Width Proportions of Two Blocks with a Slider

Change width proportions of two blocks with a slider

You can adjust your flexbox along with resize - the downside is that the slider its not very customizeable:

• add resize: horizontal to one of the flex items
• add flex: 1 to the other flex item (so that this flex item will adjust automatically in response to the changing width of the other flex item as it is resized)

See demo below:

.outer {
  display: flex;
  flex-direction: row;
}

.block {
  height: 100px;
  width: 50%; /* 50% would suffice*/
}

.block-1 {
  background-color: red;
  resize: horizontal; /* resize horizontal */
  overflow: hidden; /* resize works for overflow other than visible */
}

.block-2 {
  background-color: green;
  flex: 1; /* adjust automatically */
}

<div id="app">
  <div class="outer">
    <div class="block block-1">
      Block 1
    </div>
    <div class="block block-2">
      Block 2
    </div>
  </div>
</div>

Slider that increased center slide width. (Slider plugin suggestions)

Please Try this css for child Element:-

html,
body {
  background: #102131;
}
.slider {
  width: 1240px;
  margin: 20px auto;
  text-align: center;
  padding: 20px;
  color: white;
}
.slider .slide {
  padding: 0px;
}
.slider .slide .child-element {
  transition: all .5s;
  background: #0c1c79;
  width: 100%;
  height: 800px;
  width: 300px;
  transform-origin: top center;
  margin: 0 auto;
}
.slider .slide .child-element .imgWrap img {
  width: 100%;
  max-width: 100%;
}
.slider .slide .child-element .desc {
  display: none;
}
.slider .slide.slick-active:last-chid .child-element {
  margin-left: auto;
}
.slider .slide.slick-center .child-element {
  background: rebeccapurple;
    transform: scale(1.68);
  max-width: initial;
}
.slider .slide.slick-center .child-element .desc {
  display: block;
}

How can I make JSSOR change its aspect ratio?

Scripts

<!-- it works the same with all jquery version from 1.x to 2.x -->
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<!-- use jssor.slider.mini.js (39KB) or jssor.sliderc.mini.js (31KB, with caption, no slideshow) or jssor.sliders.mini.js (26KB, no caption, no slideshow) instead for release -->
<!-- jssor.slider.mini.js = jssor.sliderc.mini.js = jssor.sliders.mini.js = (jssor.core.js + jssor.utils.js + jssor.slider.js) -->
<script type="text/javascript" src="../js/jssor.core.js"></script>
<script type="text/javascript" src="../js/jssor.utils.js"></script>
<script type="text/javascript" src="../js/jssor.slider.js"></script>
<script>
    jQuery(document).ready(function ($) {
        var _SlideshowTransitions = [
        //Fade
        { $Duration: 700, $Opacity: 2, $Brother: { $Duration: 1000, $Opacity: 2 } }
        ];

        var options = {
            $FillMode: 1,                                       //[Optional] The way to fill image in slide, 0 stretch, 1 contain (keep aspect ratio and put all inside slide), 2 cover (keep aspect ratio and cover whole slide), 4 actual size, 5 contain for large image, actual size for small image, default value is 0
            $SlideDuration: 800,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
            $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
            $AutoPlay: true,                                    //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $AutoPlayInterval: 1500,                            //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
            $SlideshowOptions: {                                //[Optional] Options to specify and enable slideshow or not
                $Class: $JssorSlideshowRunner$,                 //[Required] Class to create instance of slideshow
                $Transitions: _SlideshowTransitions,            //[Required] An array of slideshow transitions to play slideshow
                $TransitionsOrder: 1,                           //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
                $ShowLink: true                                    //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
            },

            $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
                $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $AutoCenter: 2,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 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 resizes
        function ScaleSlider() {
            var windowWidth = $(window).width();

            if (windowWidth) {
                var windowHeight = $(window).height();
                var originalWidth = jssor_slider1.$OriginalWidth();
                var originalHeight = jssor_slider1.$OriginalHeight();

                var scaleWidth = windowWidth;
                if (originalWidth / windowWidth < originalHeight / windowHeight) {
                    scaleWidth = Math.ceil(windowHeight / originalHeight * originalWidth);
                }

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

        ScaleSlider();

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

    });
</script>

html

<div style="position: relative; width: 100%; overflow: hidden;">
    <div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">
        <!-- Jssor Slider Begin -->
        <!-- You can move inline styles to css file or css block. -->
        <div id="slider1_container" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1000px; height: 1000px;">
            <!-- Slides Container -->
            <div u="slides" style="cursor: move; position: relative; left: 0px; top: 0px; width: 1000px; height: 1000px; overflow: hidden; ">
                <div><img u="image" src="tallent/web-2012-01-29-183109.jpg" /></div>
                <div><img u="image" src="tallent/web-2014-04-01-104205.jpg" /></div>
                <div><img u="image" src="tallent/test-wide.jpg" /></div>
                <div><img u="image" src="tallent/web-2012-02-04-123703.jpg" /></div>
                <div><img u="image" src="tallent/web-2012-06-02-083648.jpg" /></div>
                <div><img u="image" src="tallent/web-2014-04-01-093103.jpg" /></div>
                <div><img u="image" src="tallent/web-2013-11-20-131902.jpg" /></div>
                <div><img u="image" src="tallent/web-2013-06-30-184152.jpg" /></div>
                <div><img u="image" src="tallent/web-2013-04-19-163938.jpg" /></div>
                <div><img u="image" src="tallent/web-2013-03-10-084125.jpg" /></div>
            </div>

            <!-- Arrow Navigator Skin Begin -->
            <style>
                        /* jssor slider arrow navigator skin 03 css */
                        /*
                .jssora03l              (normal)
                .jssora03r              (normal)
                .jssora03l:hover        (normal mouseover)
                .jssora03r:hover        (normal mouseover)
                .jssora03ldn            (mousedown)
                .jssora03rdn            (mousedown)
                */
                        .jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn {
                            position: absolute;
                            cursor: pointer;
                            display: block;
                            background: url(../img/a03.png) no-repeat;
                            overflow: hidden;
                        }

                        .jssora03l {
                            background-position: -3px -33px;
                        }

                        .jssora03r {
                            background-position: -63px -33px;
                        }

                        .jssora03l:hover {
                            background-position: -123px -33px;
                        }

                        .jssora03r:hover {
                            background-position: -183px -33px;
                        }

                        .jssora03ldn {
                            background-position: -243px -33px;
                        }

                        .jssora03rdn {
                            background-position: -303px -33px;
                        }
            </style>
            <!-- Arrow Left -->
            <span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
            </span>
            <!-- Arrow Right -->
            <span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 123px; right: 8px">
            </span>
            <!-- Arrow Navigator Skin End -->
        </div>
    </div>
</div>

How to change the dimensions of the Jssor Image Slider without losing it's responsive nature, image aspect ratio, etc. only on iPhone device?

//Your website
jQuery(document).ready(function ($) { 
   //...
   function ScaleSliderDevices() {
             var bodyWidth = DEVICE.Screen.width();
             if (DEVICE.Screen.osDimVariation()) {
                 bodyWidth = DEVICE.Screen.width() + osWidthOffset();
             }
              jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 940));
         };

    //...
    if (DEVICE.mobile())
    {
        $(window).bind('resize', ScaleSliderDevices);
    }

    //as the resize event may not fire at the beginning sometimes, please scale slider manually after document load
    ScaleSliderDevices();
}

How do you allow a user to manually resize a div element vertically?

In your column flexbox you can use resize on one of the divs and adjust the other automatically using flex-grow set to one - the downside is that the slider is not very customizeable:

• add resize: vertical to one of the flex items
• add flex: 1 to the other flex item (so that this flex item will adjust automatically in response to the changing height of the other flex item as it is resized)

body {
  margin: 0;
}

.outer {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.block {
  height: 50%;
}

.block-1 {
  background-color: red;
  resize: vertical; /* resize vertical */
  overflow: auto; /* resize works for overflow other than visible */
}

.block-2 {
  background-color: green;
  flex: 1; /* adjust automatically */
}

<div class="outer">
  <div class="block block-1">
    Block 1
  </div>
  <div class="block block-2">
    Block 2
  </div>
</div>

Scale full-width-slider till to the browsers bottom

There is a full screen slider demo.

Please see the answer of How can I make JSSOR change its aspect ratio?

---

Related Topics