常連

### 前提・実現したいこと

MV（メインビジュアル）で画像をスライドさせたいと考えております。
その際に、スライダーから少し離れた位置にプログレスバーの設置を想定しています。

現在考えているデザイン▼
![イメージ説明](47587037ff60e964c54808aca925423a.jpeg)

画像部分がスライドしてほしい箇所になります。
画像左にある線が想定しているプログレスバーです。
イメージに近いサイトのように上から下に動き、下にきた時に画像が変わってほしいです。

プログレスバーのアニメーションがイメージに近いサイト▼
https://www.creative-web.co.jp/

### 現在の状況・発生している問題・エラーメッセージ

①現在の状況
下記参考サイトを元にcssを修正しプログレスバーを横向きから縦向きに変更することができました。

参考サイト▼
https://codepen.io/yhunter/pen/rwmVro

現在のコーディングでの表示状況▼
![イメージ説明](7db2d1f057a87b6e261ceb5c68b19ad2.jpeg)

②現在の問題点
プログレスバーをスライドより左に移動させようとすると
スライドを表示する為に指示しているoverflow: hidden;の指令がきいてしまいスライド画像より左に移動することができません。
エラーメッセージはありません。

③希望する改善点
現在使用しているコーディング方法に特に拘りはありません。
別の方法でも実装したい事ができれば問題ありません。
（背景画像で画像を挿入しておりますが、画像タグで挿入でも大丈夫です）

### html

```ここに言語名を入力
<div class="mv_home" id="mv">
    <div class="mv-box-img">
        <div class="mv-bg"></div>
        <div class="mv-slider">
　　　　　　 
            <div class="slider" id="slider"  data-width="100">
                <ul>
                    <li class="actslide">
                        <div class="slide" style="background:url(img/home/img-mv01.jpg)" >
                            <div class="shadow">
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="slide" style="background:url(img/home/img-mv02.jpg)" >
                            <div class="shadow">
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="slide" style="background:url(img/home/img-mv03.jpg)" >
                            <div class="shadow">
                            </div>
                        </div>
                    </li>
                </ul>
　　　　　　　　　
                <div class="progress">
                    <div class="bar"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="mv-box-ttl">
        <div class="mv-box-ttl-inner">
        </div>
    </div>
</div>
```

### css

```ここに言語名を入力
/*独自で指示したcss*/
#mv{
    display: flex;
}
#mv .mv-box-img{
    width: 50%;
    height: 100vh;
    position: relative;
}
#mv .mv-box-img .mv-slider{
    width: 81%;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 80vh;
}
#mv .mv-box-img .mv-bg{
    width: 79%;
    height: 100%;
    background: #1A1311;
    position: absolute;
    top: 0;
    left: 0;
}
#mv .mv-box-ttl{
    width: 50%;
    background:#ffffff;
    position: relative;
}
#mv .mv-box-ttl .mv-box-ttl-inner{
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}
#mv .mv-box-ttl h1{}
#mv .mv-box-ttl .mv-sav-ttl{
    font-size: 26px;
}
#mv .mv-box-ttl .mv-txt{
    font-size: 15px;
}

/*参考サイトからとってきたcss*/
.slider {
  position: relative;
}
#slider {
  position: relative;
  overflow: hidden;
  width: 100% !important;
}
#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 99999px;
  overflow: hidden;
  list-style: none;
}
#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  text-align: center;
}
#slider ul li .slide {
  background-size: cover;
  height: 80vh;
}
button.control_prev, button.control_next {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: block;
  border: none;
  width: 2em;
  height: 2em;
  line-height: 1.9em;
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 2rem;
  opacity: 0.8;
  cursor: pointer;
  border-radius: 50%;
  transform: translateY(-50%);
}
button.control_prev:focus, button.control_next:focus {
  outline: none;
  border: 1px rgba(255, 255, 255, 0.5) solid;
}
button.control_prev:hover, button.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}
button.control_prev {
  left: 2rem;
}
button.control_next {
  right: 2rem;
}      
.progress {
  transform: rotateX(90);
  transform: rotate(90deg);
  left: -49%;
  position: absolute;
  top: 40vh;
  background: rgba(255, 255, 255, 0.3);
  height: .5rem;
  width: 100%;
  bottom: 0;
　border-top: 1px rgba(0, 0, 0, 0.15) solid;
}
.progress .bar {
  height: 100%;
  width: 0%;
  background: #fff;
}
.teaser {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
  color: #fff;
  transform: translateY(-50%);
}
.teaser h2 {
  font-size: 5em;
  text-transform: uppercase;
  line-height: 1.5em;
  color: #fff;
}
.teaser p {
  font-size: 1.3em;
  line-height: 1.3em;
  border-top: 2px #fff solid;
  width: 33%;
  min-width: 25rem;
  margin: 0rem auto;
  padding: 1.5rem 0;
}
.teaser h3 {
  border-bottom: 2px #fff solid;
  width: 33%;
  padding: 1.5rem 0;
  margin: 0rem auto;
  min-width: 25rem;
}
.teaser a {
  margin-left: .5rem;
  margin-right: .5rem;
}
```

### js

```ここに言語名を入力
jQuery(document).ready(function ($) {
    startSlider($('#slider'), 30); // Slide container ID, SlideShow interval 
    function startSlider(obj, timer) {
        var obj, timer;
        var id = "#"+obj.attr("id");
        var slideCount = obj.find('ul li').length;
        slideWidth = obj.attr("data-width");
        var sliderUlWidth = (slideCount+1) * slideWidth;
        var time = 2;
        var $bar,
        isPause,
        tick,
        percentTime;
        isPause = false; //false for auto slideshow
        $bar = obj.find('.progress .bar');
        function startProgressbar() {
            resetProgressbar();
            percentTime = 0;    
            tick = setInterval(interval, timer);
        }
        function interval() {
            if (isPause === false) {
              percentTime += 1 / (time + 0.1);
              $bar.css({
                width: percentTime + "%"
              });
              if (percentTime >= 100) {
                moveRight();
                startProgressbar();
              }
            }
        }
        function resetProgressbar() {
            $bar.css({
              width: 0 + '%'
            });
            clearTimeout(tick);
        }
        function startslide() {
            $(id+' ul li:last-child').prependTo(id+' ul');        
            obj.find('ul').css({ width: sliderUlWidth+'vw', marginLeft: - slideWidth+'vw' });
            obj.find('ul li:last-child').appendTo(obj.attr('id')+' ul');
        }
        if (slideCount>1) {
            startslide();
            startProgressbar();
        }
        else { // hade navigation buttons for 1 slide only
             $(id+' button.control_prev').hide();
             $(id+' button.control_next').hide();
        }
        function moveLeft() {
           $(id+' ul').css( { transition: "1s",
                  transform:  "translateX(" + slideWidth + "vw)" 
            });
            setTimeout( function() { 
                $(id+' ul li:last-child').prependTo(id+' ul');
                $(id+' ul').css( { transition: "none",
                  transform:  "translateX(" + 0 + "vw)" 
                });
                $('li.actslide').prev().addClass('actslide').next().removeClass('actslide');
            }, 1000 );
        }
        function moveRight2() { // fix for only 2 slades
          $(id+' ul li:first-child').appendTo(id+' ul'); 
$(id+' ul').css( { 
    transition: "none",                      
    transform:  "translateX(80vw)"}).delay(); 
          setTimeout( function() {                
$(id+' ul').css( { 
    transition: "1s",                      
    transform:  "translateX(0vw)" });         
                }, 100, setTimeout( function() {        
$(id+' ul').css( { transition: "none",                      transform:  "translateX(0vw)" }); 
$('li.actslide').next().addClass('actslide').prev().removeClass('actslide');     
                }, 1000 )  );  
        }
        function moveRight() {
            if (slideCount>2) {
                  $(id+' ul').css( { transition: "1s",
                  transform:  "translateX(" + (-1)*slideWidth + "vw)" 
                });

                setTimeout( function() { 
                    
                    $(id+' ul li:first-child').appendTo(id+' ul');
                    $(id+' ul').css( { transition: "none",
                      transform:  "translateX(" + 0 + "vw)" 
                    });

                    $('li.actslide').next().addClass('actslide').prev().removeClass('actslide');
                }, 1000 );  
            }
            else {
                moveRight2();
            }          
        }
        $(id+' button.control_prev').click(function () {
            moveLeft();
            startProgressbar();
        });
        $(id+' button.control_next').click(function () {
              moveRight();
            startProgressbar();
        });
        $(id+' .progress').click(function() {
            if (isPause === false) {
                isPause = true;
            }
            else {
                isPause = false;
            }   
      });
  };
}); 
```

### 試したこと

・**html プログレスバーの記述を移動させる**
　スライド、プログレスバー共に動作しない。

・**css  スライド画像の指定を小さくする**
　jsの指示のせいか、スライド画像のサイズ指定ができない。
　無理やりスライド画像のサイズ指定をするとスライドが正常に動作しない。

### 補足情報（FW/ツールのバージョンなど）

静的なhtml
Windows 10

質問編集履歴