スライダーの端にレスポンシブ対応でロゴ表示

Question

使っているプラグイン→　http://idangero.us/swiper/
上記のようなスライドを作りたいと思っています。
作る際はこちらの質問を参考にしました。https://teratail.com/questions/57296

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css
">
 <script type="text/javascript" src=“https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>
<div class="container">
<div class="swiper-container">
<div class="swiper-wrapper">
    <div class="swiper-slide"> 
        <a href="#a"><img src="https://placehold.jp/800x300.png" alt=""></a>
    </div>
    <div class="swiper-slide">
        <a href="#a"><img src="https://placehold.jp/800x300.png" alt=""></a>
    </div>
    <div class="swiper-slide">
        <a href="#a"><img src="https://placehold.jp/800x300.png" alt=""></a>
    </div>
</div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
</div>

var swiper = new Swiper('.swiper-container', {

    slidesPerView: 3,
    autoplay: 5000,
    speed: 1000,
    loop: true,
        pagination: '.swiper-pagination',

    // ナビゲーションボタン
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',

    // 1スライドごとの余白
    spaceBetween: 20

});

.container {
	overflow: hidden;
	width: 100%;
}
.swiper-container {
	width: 150%;
	margin: 0 -25%;
}
.swiper-button-prev {
	left: calc(10px + 25%);
}
.swiper-button-next {
	right: calc(10px + 25%);
}
.swiper-slide {
	pointer-events: none;
	opacity: .5;
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-ms-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition: opacity .5s;
}
.swiper-slide-next {
	pointer-events: auto;
	opacity: 1;
}
.swiper-slide img {
	width: 100%;
}

やりたいこと
---
・中央に画像が来た際に右下に画像ロゴを表示させたい(ロゴをオーバーレイさせたい)
・レスポンシブに対応。
z-indexで最上面に表示することは出来ましたが、他のプラグインlity.jsを利用している為うまくできなかったこと。

position: absoluteで位置設定で表示は出来るがレスポンシブに出来なかった為こちらで相談させていただきました。
恐れ入りますが、ご教示の程よろしくお願いいたします。
追記：作ったソースになります。https://jsfiddle.net/gn333d67/2/

Comments

[kei344]

書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）か、再現するURLを提示されたほうが回答を得やすいと思います。

[io-rin]

失礼しました。再度追記させていだきました。

[kei344]

外部サービスにコードを置くだけでなく、質問文にコードブロックで追記することをお勧めします。コードブロックは ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

html,body {
  margin: 0;
  padding: 0;
}
.container {
	position: relative;
}
.container a, .container img {
	display: block;
}
.container > img {
	position: absolute;
  bottom: 0;
  width: auto;
  right: 25%;
  margin-right: 8px;
  z-index: 1;
}
```**動くサンプル：**[https://jsfiddle.net/3yrd0635/](https://jsfiddle.net/3yrd0635/)

Answer 2

画像の通りであれば、左上からではなく右下から指定してみてはいかがでしょうか？

width: xxxxpx;
position: absolute;
right:0;
bottom:0;