CSSを使用したSliderの前後...初期幅より小さいサイズの画像のサイズを変更できません

私はWP Webサイトを開発しており、HTMLコードから移行しました。ですから、私はWPでプラグインを使用するのに苦労しています。CSSを使用したSliderの前後...初期幅より小さいサイズの画像のサイズを変更できません

私はBEFORE &の後にCSSを使用するだけの機能を探して見つけました。それは動作し、私はそれについて幸せです。

これは私がそれを見つけたところです：

http://lea.verou.me/2014/07/image-comparison-slider-with-pure-css/

OUTPUT：

今私はそれを少し微調整したい...

わかりました。。now now .. （.image-slider > div）の幅を200pxに変更した場合。

.image-slider > div { 
     position: absolute; 
     top: 0; bottom: 0; left: 0; 
     width: 200px; 
     max-width: 100%; 
     overflow: hidden; 
     resize: horizontal; 
    }

出力：あなたは全体のコードやスニペットへのリンクがあります以下

：

/** 
 
* Image slider with pure CSS 
 
* Original version in http://demosthenes.info/blog/css 
 
*/ 
 

 
.image-slider { 
 
    position:relative; 
 
    display: inline-block; 
 
    line-height: 0; 
 
} 
 

 
/* Could use a pseudo-element, but they’re currently 
 
    super buggy. See: http://dabblet.com/gist/ab432c3f6a8f672cd077 */ 
 
.image-slider > div { 
 
    position: absolute; 
 
    top: 0; bottom: 0; left: 0; 
 
    width: 200px; 
 
    max-width: 100%; 
 
    overflow: hidden; 
 
    resize: horizontal; 
 
} 
 

 
/* Cross-browser resizer styling */ 
 
.image-slider > div:before { 
 
    content: ''; 
 
    position: absolute; 
 
    right: 0; bottom: 0; 
 
    width: 40px; height: 40px; 
 
    padding: 5px; 
 
    background: linear-gradient(-45deg, white 40%, transparent 0); 
 
    background-clip: content-box; 
 
    cursor: ew-resize; 
 
    -webkit-filter: drop-shadow(0 0 2px black); 
 
    filter: drop-shadow(0 0 2px black); 
 
} 
 

 
.image-slider img { 
 
    user-select: none; 
 
    max-width: 400px; 
 
}

<div class="image-slider"> 
 
\t \t \t \t \t \t 
 
    <div> 
 
\t \t \t \t \t \t 
 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-before.jpg" /> 
 
\t \t \t \t \t \t 
 
    </div> 
 
\t \t \t \t \t \t 
 
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg" /> 
 
\t \t \t \t \t 
 
</div>

私はサイズを変更するにはいくつかの助けが必要BEFORE pi 200ピクセル未満です。

ご迷惑をおかけして申し訳ありません。私は私が見つけた唯一の解決策は、幅ホバーslectorのウィッヒの変更を追加することですいくつかの追加& MEDIA QUERIES

<script type='text/javascript'> 
 
\t \t \t \t \t \t \t  \t \t \t 
 
    function mouseOver1() 
 
\t \t \t \t \t \t \t  \t \t \t 
 
{ \t \t \t \t \t \t  \t \t \t \t 
 
    document.getElementById('pic1').style.width="700px"; 
 
\t \t \t \t \t \t \t \t  \t \t \t 
 
    } 
 
\t \t \t \t \t \t \t  \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t 
 
</script> 
 

 
\t \t \t \t \t \t \t \t \t \t 
 
<script type='text/javascript'> 
 
\t \t \t \t \t \t \t \t \t \t  
 
    function mouseOverReset1() { 
 
\t \t \t \t \t \t \t \t \t \t  
 
    document.getElementById('pic1').style.width="15px"; 
 
\t \t \t \t \t \t \t \t \t \t  }  
 
\t \t \t \t \t \t \t \t \t \t 
 
</script>

/** 
 

 
* Title: Custom Style For Smile Gallery 
 
* Author: Nick D' Curz 
 
* Company: Nick Software Solutions 
 
* URL:http://nicksoftwaresolutions.com; 
 

 
*/ 
 

 

 

 
    
 
@media screen and (min-width: 200px) 
 
    { 
 

 
/** 
 
* Image slider with pure CSS 
 
* Original version in http://demosthenes.info/blog/css 
 
*/ 
 

 
.image-slider { 
 
    position:relative; 
 
    display: inline-block; 
 
    line-height: 0; 
 
} 
 

 
/* Could use a pseudo-element, but they’re currently 
 
    super buggy. See: http://dabblet.com/gist/ab432c3f6a8f672cd077 */ 
 
.image-slider > div { 
 
    position: absolute; 
 
    top: 0; bottom: 0; left: 0; 
 
    width:150px; 
 
    max-width: 100%; 
 
    overflow: hidden; 
 
    resize: horizontal; 
 
    -webkit-transition: width 1s; /* Safari */ 
 
    -webkit-transition-timing-function: linear; /* Safari */ 
 
    transition: width 1s; 
 
    transition-timing-function: linear; 
 
} 
 

 
/* Cross-browser resizer styling */ 
 
.image-slider > div:before { 
 
    content: ''; 
 
    position: absolute; 
 
    right: 0; bottom: 0; 
 
    width: 40px; height: 40px; 
 
    padding: 5px; 
 
    background: linear-gradient(-45deg, white 40%, transparent 0); 
 
    background-clip: content-box; 
 
    cursor: ew-resize; 
 
    -webkit-filter: drop-shadow(0 0 2px black); 
 
    filter: drop-shadow(0 0 2px black); 
 
} 
 

 
.image-slider img { 
 
    user-select: none; 
 
    max-width: 300px; 
 
} 
 

 
/*.image-slider > div:hover{ 
 
    width:25px; 
 
}*/ 
 

 
} 
 

 
@media screen and (min-width: 768px) 
 
    { 
 

 
/** 
 
* Image slider with pure CSS 
 
* Original version in http://demosthenes.info/blog/css 
 
*/ 
 

 
.image-slider { 
 
    position:relative; 
 
    display: inline-block; 
 
    line-height: 0; 
 
} 
 

 
/* Could use a pseudo-element, but they’re currently 
 
    super buggy. See: http://dabblet.com/gist/ab432c3f6a8f672cd077 */ 
 
.image-slider > div { 
 
    position: absolute; 
 
    top: 0; bottom: 0; left: 0; 
 
    width:350px; 
 
    max-width: 100%; 
 
    overflow: hidden; 
 
    resize: horizontal; 
 
    -webkit-transition: width 1s; /* Safari */ 
 
    -webkit-transition-timing-function: linear; /* Safari */ 
 
    transition: width 1s; 
 
    transition-timing-function: linear; 
 
} 
 

 
/* Cross-browser resizer styling */ 
 
.image-slider > div:before { 
 
    content: ''; 
 
    position: absolute; 
 
    right: 0; bottom: 0; 
 
    width: 40px; height: 40px; 
 
    padding: 5px; 
 
    background: linear-gradient(-45deg, white 40%, transparent 0); 
 
    background-clip: content-box; 
 
    cursor: ew-resize; 
 
    -webkit-filter: drop-shadow(0 0 2px black); 
 
    filter: drop-shadow(0 0 2px black); 
 
} 
 

 
.image-slider img { 
 
    user-select: none; 
 
    max-width: 700px; 
 
} 
 

 
/*.image-slider > div:hover{ 
 
    width:25px; 
 
}*/ 
 

 
}

<link href="http://www.example.com/wp-content/themes/blankslate/css/bootstrap.css" rel="stylesheet"/> 
 
<!-- SMILE GALLERY SLIDER PICTURES STARTS HERE --> 
 

 
\t \t \t \t \t \t \t <!-- PICTURE 1 STARTS HERE --> 
 

 
\t \t \t \t \t \t \t \t <div style="text-align: center;"> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t <div> 
 

 
\t \t \t \t \t \t \t \t \t \t <div class="image-slider"> 
 
\t \t \t \t \t \t \t \t \t \t \t <div id="pic1"> 
 
\t \t \t \t \t \t \t \t \t \t \t <img src="http://www.example.com/wp-content/uploads/2016/03/o1-b.jpg" /> 
 
\t \t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t \t <img src="http://www.example.com/wp-content/uploads/2016/03/o1-a.jpg" /> 
 
\t \t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t <span > 
 
<a data-toggle="tooltip" title="Click" class="btn btn-warning pull-left" onclick="mouseOver1()" style="width:70px">Before</a></span> 
 
\t \t \t \t \t \t \t \t \t \t <span > 
 
<a data-toggle="tooltip" title="Click" class="btn btn-success pull-right" onclick="mouseOverReset1()" style="width:70px">After</a></span> 
 
\t \t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t \t \t \t <br><br> 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t </div> 
 

 
\t \t \t \t \t \t \t <!-- PICTURE 1 ENDS HERE -->

出典

2016-03-23 Geeky Bird

WITH MY CODEを更新した時間:)

いただき、ありがとうございますDIVの

.image-slider > div:hover{ width:10px; }

出典

2016-03-23 09:06:35 Babken

Babkenありがとう、それは非常に便利な:)でした。しかし、私はユーザーが写真を左にスライドさせることができるものが必要です。他の開発者に提案があるかどうかを見てみましょう。 –

実際にあなたのCSSにコードを追加すると、左側にスライドすることができます。しかし、解決策はそれが小さなハックです良い終了していません。 – Babken

yes :)写真を25ピクセルにして、ユーザーはハンドルを使ってピクセルを上げることができます。再度、感謝します：） –

CSSを使用したSliderの前後...初期幅より小さいサイズの画像のサイズを変更できません

答えて

関連する問題