iframeスライダーの可変について

Question

スライダーをiframeで読み込み、
そのiframeを可変させる方法を教えてほしいです。

スライダーはslickを使っています。

下記のように試したところ、
Androidではiframeの可変が出来ましたが、
iphoneだと崩れてしまいます。

■試したこと

<style> .movieWraper { position: relative width: calc(100% - 10px); margin: 0 auto; } .iframeWrap{ height: 0; padding-bottom: 33.25%; } .slider_frame { position: absolute; top: 0; left: 0; } </style> <div class="movieWraper"> <div class="iframeWrap"> <iframe src="slider/index.html" frameborder="0" width="100%" height="100%" frameborder="0" allowfullscreen class="slider_frame"></iframe> </div> </div>

★iframe内

<link rel="stylesheet" type="text/css" href="slick/slick.css"> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"> <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="slick/slick.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> html, body { margin: 0; padding: 0; }

* {
  box-sizing: border-box;
}

.slider {
    width: 100%;
    margin: 0 auto;
}

.slick-slide {
  margin: 0;
}

.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
    color: black;
}

</style> <script> $(function(){

$('.slider').slick({
dots: true,
autoplay: true,
arrows:false,
});

});
</script>

<section class="slider"> <div> <a href="#"><img src="img01.png" width="100%" border="0"></a> </div> <div> <a href="#"><img src="img01.png" width="100%" border="0"></a> </div> <div> <a href="#"><img src="img01.png" width="100%" border="0"></a> </div> <div> <a href="#"><img src="img01.png" width="100%" border="0"></a> </div> </section>

---

ご教授お願い致します。

Answer 1

この場合ですと
子ファイル（iframe内の）ファイルに

<script> $(function(){ setTimeout(function() { $(".slider").css({"position" : "fixed"}); } , 10); }); </script>

を記述して、要素を固定してあげてください。

Comments

[mmm_]

ありがとうございます！
解決できました！