Slider and text problem



  • There's a slider - how to fix the text - to keep it inside its block, and not move along with the wire.

    $(document).ready(function() {
      var pxar = 0;
      var n = $(".news-overflow").length;
      var pages = Math.floor(n / 3);
      var curPage = 0;
    

    $(".news-right").click(function() {
    if (curPage <= pages) {
    pxar -= 704;
    curPage++;
    $(".news-overflow").stop().animate({
    "margin-left": pxar + "px"
    }, 1000);
    }
    })

    $(".news-left").click(function() {
    if ((curPage - 1) >= 0) {
    pxar += 704;
    curPage--;
    $(".news-overflow").stop().animate({
    "margin-left": pxar + "px"
    }, 1000);
    }
    })

    });

    .news-table {
    display: block;
    width: 100%;
    height: 260px;
    background: #0e0f16;
    border-bottom: 4px solid #171823;
    margin-bottom: 40px;
    }
    .news-table-content {
    display: block;
    width: 1060px;
    margin: 0 auto;
    padding-top: 52px;
    position: relative;
    top: 8px;
    left: 35px;
    }
    .news-body {
    display: block;
    width: 98%;
    height: 150px;
    overflow: hidden;
    }
    .news-body img {
    display: inline-block;
    float: left;
    margin-right: 12px;
    width: 340px;
    }
    ul.slider-footer li {
    display: inline-block;
    }
    ul.slider-footer li .news-slider-descr {
    position: absolute;
    color: #fff;
    font-size: 14px;
    }
    ul.slider-footer li img {
    width: 340px;
    height: 129px;
    background-size: cover;
    }
    .news-left {
    display: block;
    position: absolute;
    top: 72px;
    left: -18px;
    cursor: pointer;
    width: 40px;
    height: 86px;
    background: #000;
    }
    .news-right {
    display: block;
    position: absolute;
    top: 72px;
    right: 56px;
    background: #000;
    cursor: pointer;
    width: 43px;
    height: 86px;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="news-table-content">
    <div class="news-body">
    <div class="news-overflow">
    <ul class="slider-footer">
    <li class="slider-item">
    <img src="http://i.imgur.com/LGckpST.jpg">
    <div class="news-slider-descr">
    Текст
    </div>
    </li>
    <li class="slider-item">
    <img src="http://i.imgur.com/LGckpST.jpg">
    <div class="news-slider-descr">
    Текст
    </div>

        &lt;/li&gt;
        &lt;li class="slider-item"&gt;
          &lt;img src="http://i.imgur.com/LGckpST.jpg"&gt;
          &lt;div class="news-slider-descr"&gt;
            Текст
          &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class="slider-item"&gt;
          &lt;img src="http://i.imgur.com/LGckpST.jpg"&gt;
        &lt;/li&gt;
        &lt;li class="slider-item"&gt;
          &lt;img src="http://i.imgur.com/LGckpST.jpg"&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    

    </div>
    <div class="news-left"></div>
    <div class="news-right"></div>
    </div>



  • Add.

    position: relative;
    

    parent(s) <li>

    The thing is, position: absolute; (like your blocks with the text) the element &apos; s position shall be calculated relative to the nearest parent from position:absolute or position:relative or body♪ Since the nearest parent with the properties in question is, if I'm not mistaken, .news-table-content and the text concerning it is positioned.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2