コメント
コメントの投稿
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Base.master.vb" Inherits="UpdatePanelTest.Base" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link runat="server" href="~/css/Style.css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="cph_header" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="cph_body" runat="server">
</asp:ContentPlaceHolder>
</div>
<div>
<script src="<%=Me.ResolveClientUrl("~/Scripts/jquery-1.7.min.js")%>"></script>
<asp:ContentPlaceHolder ID="cph_footer" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Master/Base.Master" CodeBehind="UpdatePanelTest.aspx.vb" Inherits="UpdatePanelTest.UpdatePanelTest" %>
<asp:Content ID="header" ContentPlaceHolderID="cph_header" runat="server">
</asp:Content>
<asp:Content ID="body" ContentPlaceHolderID="cph_body" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="border-black margin10">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<p>UpdatePanelの内部</p>
<div class="slider-wrapper border-gray margin10">
<asp:Image runat="server" ID="img01" CssClass="border-gray" ImageUrl="~/Images/img100.jpg" />
<asp:Image runat="server" ID="img02" CssClass="border-gray" ImageUrl="~/Images/img101.jpg"/>
<asp:Image runat="server" ID="img03" CssClass="border-gray" ImageUrl="~/Images/img102.jpg"/>
</div>
<asp:Button ID="btnReturn" runat="server" Text="OK" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
<asp:Content ID="footer" ContentPlaceHolderID="cph_footer" runat="server">
<script src="<%=Me.ResolveClientUrl("~/Scripts/Slick/slick.min.js")%>"></script>
<script src="<%=Me.ResolveClientUrl("~/Scripts/Common.js")%>"></script>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(
function(evt, args) {
//Javascriptを再読み込みする
$.getScript("<%=Me.ResolveClientUrl("~/Scripts/Common.js")%>")
});
</script>
</asp:Content>
$(document).ready(function () {
$('.slider-wrapper').not('.slick-initialized').slick({
// アクセシビリティ。左右ボタンで画像の切り替えをできるかどうか
accessibility: true,
// 自動再生。trueで自動再生される。
autoplay: true,
// 自動再生で切り替えをする時間
autoplaySpeed: 3000,
// 自動再生や左右の矢印でスライドするスピード
speed: 400,
// 自動再生時にスライドのエリアにマウスオンで一時停止するかどうか
pauseOnHover: true,
// 自動再生時にドットにマウスオンで一時停止するかどうか
pauseOnDotsHover: true,
// 切り替えのアニメーション。ease,linear,ease-in,ease-out,ease-in-out
cssEase: 'linear',
// 画像下のドット(ページ送り)を表示
dots: false,
// ドットのclass名をつける
dotsClass: 'slider-wrapper',
// ドラッグができるかどうか
draggable: true,
// 切り替え時のフェードイン設定。trueでon
fade: true,
// 左右の次へ、前へボタンを表示するかどうか
arrows: true,
// 無限スクロールにするかどうか。最後の画像の次は最初の画像が表示される。
infinite: true,
// 最初のスライダーの位置
initialSlide: 0,
// 画像の遅延表示。‘ondemand’or'progressive'
lazyLoad: 'ondemand',
// スライドのエリアにマウスオーバーしている間、自動再生を止めるかどうか。
pauseOnHover: true,
// スライドのエリアに画像がいくつ表示されるかを指定
slidesToShow: 1,
// 一度にスライドする数
slidesToScroll: 1,
// タッチスワイプに対応するかどうか
swipe: true,
// 縦方向へのスライド
vertical: false,
// 表示中の画像を中央へ
centerMode: true,
// 中央のpadding
centerPadding: '25px'
});
});
img {
width:300px;
}
.slider-wrapper{
width : 350px;
}
.border-black {
border: 1px solid black;
}
.border-gray {
border: 1px solid gray;
}
.margin10 {
margin: 10px;
}
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。