Slick Carousel +手风琴格式问题

时间：2019-01-07 20:39:10

标签： javascript jquery html css twitter-bootstrap

手风琴中的光滑轮播装置出现问题。这是目前发生的事情：

复制品：打开手风琴->关闭手风琴->单击右箭头->打开手风琴
这是格式化的全部来源。我已经设置了一个单击功能，可以将其放回原处，但是我一点都不走运。

请将代码段扩展为整页。

enter image description here 

<html>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/7088154/7564812/css/fonts.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<head>
<style>
/* --- */
@media (max-width: 1023px) {
	.row .row {
		margin-left: -1.0rem;
		margin-right: -1.0rem;
	}
}
@media (min-width: 992px) {
    .col-md-7 {
        width: 58.335%;
    }
}
@media (max-width: 411px) {
	p {
		font-size: smaller;
	}
	.heading > .col-xs-9 > h4 {
		font-size: small!important;
	}
	.col-xs-2 {
		display: none;
	}
	.col-xs-10 {
		width: 100%;
	}
	.col-xs-4 > span {
		font-size: smaller!important;
	}
	.col-xs-3 > span {
		font-size: inherit;
	}
}
#bannerWrapper {
    display: none;
}
#sticky {
	z-index: 100;
	top: 0;
	position: sticky;
	position : -webkit-sticky;
}
.second {
	background: white;
	border-bottom: 1px solid #5E6A71;
}
#pageTitle {
	display: none;
}
#columnMiddle {
	padding-top: 50px;
}
.heading {
    background-color: #A2AD00;
    display: flex;
}
.sub-heading {
    background-color: white;
    border-bottom: 1px solid lightgray;
}


.container {
    /* box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15); */
    border: 1px solid #5E6A71;
}


/* Change the padding on rows.*/
.container > .col-xs-3, .col-xs-4 {
    padding-top: .6rem!important;
    padding-bottom: .6rem!important;
}
.container > .col-md-5, .col-md-7 {
    padding-top: .2rem!important;
    padding-bottom: .2rem!important;
    font-family: "Whitney A", "Whitney B";
    font-size: large;
}
.col-xs-10, .col-xs-2 {
	padding-top: .2rem!important;
    padding-bottom: .2rem!important;
    font-family: "Whitney A", "Whitney B";
	font-size: medium;
}
.col-xs-10 > span {
    font-size: 18px!important;
}
.col-xs-2 > span {
    font-size: 18px!important;
}
/* ----- */

.even-row > .col-xs-3 {
	padding-top: 10px;
}
.odd-row > .col-xs-3 {
	padding-top: 10px;
}


.col-xs-3 {
    word-wrap: break-word;
    padding-right: 5px;
    padding-left: 10px;
    font-style: italic;
    color: #A2AD00;
    font-family: "Archer SSm A", "Archer SSm B"!important;
    font-weight: 600;
}
.col-xs-3 > span {
    font-size: 15px!important;
    font-family: "Archer SSm A", "Archer SSm B";
    font-weight: 800;
}

/* Junior/Mid/Senior Sub-Headings */
.col-xs-4 > span {
	font-family: "Archer SSm A", "Archer SSm B"!important;
	font-weight: 600;
    font-size: 16px;
    color: #231f20;
}
.col-xs-4 > ul > li {
    font-family: "Archer SSm A", "Archer SSm B";
    font-size: 14px;
    color: #231f20;
}
/* ----- */

.col-xs-9 {
	padding-left: 0px;
	padding-right: 0px;
	border-left: 1px solid #5E6A71;
}
.col-xs-9 > p {
    font-size: 13px!important;
    font-family: "Archer SSm A", "Archer SSm B";
    font-weight: 800;
}
#sub {
	font-weight: normal;
	font-size: smaller;
}

/* Heading */
.heading > .col-xs-9 {
	padding-left: 15px;
	padding-right: 15px;
	font-family: "Archer SSm A", "Archer SSm B"!important;
	font-size: small;
    border-left: 0px!important;
}
.heading > .col-xs-9 > h4 {
	font-size: x-large;
	color: white!important;
	font-family: "Whitney A", "Whitney B";
	margin-bottom: 2px;
}
.heading > .col-xs-3 {
	padding-right: 7px!important;
	padding-left: 7px!important;
	align-self: center;
}
/* ----- */

/* Change background color on even rows: Client Service and Counsel, 
Strategic and Creative Integrated Programming, etc.. */
.even-row {
	background-color: #F0F0F0;
}

/* Change background color on odd rows: Account Management and Operational Excellence, 
Recruitment and Retention, etc.. */
.odd-row {
	background-color: #F8F8F8;
}

/* Change background color of left-hand headings: Client, Talent, etc.. */
.left-hand-header-background {
	background-color: #EEAF00;
    font-family: "Whitney A", "Whitney B";
}
.left-hand-header-background > span {
    font-family: "Whitney A", "Whitney B"!important;
}

/* Change background color of right-hand headings: Client, Talent, etc.. */
.right-hand-header-background {
	background-color: #A2AD00;
}

.bl {
    border-left: 1px solid lightgray;
}
.bb {
    border-bottom: 1px solid #5E6A71;
}
.bg-white {
    background-color: white;
}



/* Sections */
.mainText {
    font-style: italic;
    color: #00C6D7;
}
#section {
    border-top: 1px solid #5E6A71;
    border-bottom: 1px solid #5E6A71;
}
#section1, #section2, #section3, #section4 {
    border-bottom: 1px solid #5E6A71;
}
/* ----- */



.title {
    color: #A2AD00;
    font-family: "Whitney A", "Whitney B";
    font-size: larger;
    margin-bottom: 0px;
}
.panel-heading {
	padding: 0px!important;
	border-left-width: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
}

/* Slick Carousel */
.slick-next {
    right: 10px!important;
}
.slick-prev:before {
  color: #5E6A71!important;
}
.slick-next:before {
  color: #5E6A71!important;
}
.no-arrows > .slick-next,
.no-arrows > .slick-prev {
   display: none!important;
}
/* ----- */

/* BootStrap 4 Classes */
.py-5 {
    padding-bottom: 3rem!important;
    padding-top: 3rem!important;
}
.py-2 {
    padding-bottom: .5rem!important;
    padding-top: .5rem!important;
}
.text-white {
    color: #fff!important;
}
.text-left {
    text-align: left!important;
}
.text-uppercase {
    text-transform: uppercase!important;
}
.font-weight-bold {
    font-weight: 700!important;
}
.row-11 {
    height: auto!important;
}
.container > ul {
    padding-left: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
}
.img-responsive {
	display: inline-block;
}
/* ----- */
</style>

<script> 
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 

ga('create', 'UA-27197903-14', 'auto'); 
ga('send', 'pageview'); 
</script>
</head>

<body>

<div class="container">
  <div id="sticky">
    <div class="row heading">
        <div class="col-xs-9 col-md-10 text-white text-left py-2">
            <h4 class="text-uppercase font-weight-bold">PR - Performance Benchmark</h4>
            <p>These are global expectations for FleishmanHillard account staff. 
            Managers should use this as the baseline for setting goals and managing team members at the local level. 
            Some basic expectations — such as negotiating, listening and interpersonal communication — are not included here, 
            but are essential skills to perform each role.</p>
        </div>
        <div class="col-xs-3 col-md-2 text-center" style="margin: auto;">
            <img class="img-responsive" src="" />
        </div>
    </div>

    <div class="row second odd-row">
        <div class="col-xs-3"></div>
        <div class="col-xs-9">
            <section class="regular slider">
                <div class="col-xs-4">
                    <h6 class="text-uppercase font-weight-bold title">Junior</h6>
                    <span>Valued Colleague and Practitioner.</span>
                </div>
                <div class="col-xs-4">
                    <h6 class="text-uppercase font-weight-bold title">Mid</h6>
                    <span>Trusted Colleague. Proven and Creative Practitioner.</span>
                </div>
                <div class="col-xs-4">
                    <h6 class="text-uppercase font-weight-bold title">Senior</h6>
                    <span>Trusted Client Advisor and Partner. Proven Agency Leader.</span>
                    <span id="sub"><i>*Partner and Senior Partner: Additional Requirements</i></span>
                </div>
            </section>
        </div>
      </div>
    </div>

   <div class="row panel-heading" id="section4" data-toggle="collapse" data-parent="#section4" href="#collapseFour">
        <div class="col-xs-10 col-md-5 left-hand-header-background">
            <span class="text-uppercase font-weight-bold text-white">Finance and Operations</span>
        </div>
        <div class="col-xs-2 col-md-7 right-hand-header-background">
        	<span><br/></span>
        </div>
    </div>
    
    <div class="panel-collapse collapse" id="collapseFour">
    <div class="row bb even-row">
        <div class="col-xs-3">
            <span>Financial Management of Accounts (Account Profitability, Realiziation, Budgets)</span>
        </div>
        <div class="col-xs-9">
            <section class="regular slider no-arrows">
                <div class="col-xs-4">
                    <ul>
                    	<li>Understands agency operations, including time sheets, expense reports and invoicing</li>
                        <li>Stays within hours assigned for specific projects; alerts managers when hours will go above or below forecast</li>
                        <li>Gains basic understanding of client budgets and budget management</li>
                    </ul>
                </div>
                <div class="col-xs-4">
                    <ul>
                        <li>Prepares and manages client budgets</li>
                        <li>Immediately flags budget concerns and team leaders</li>
                        <li>Understands how the agency makes money</li>
                        <li>Understands and manages write-offs</li>               
                    </ul>
                </div>
                <div class="col-xs-4">
                    <ul>
                    	<li>Approves budgets and worksheets</li>
                    	<li>Oversees forecasting for accounts and/or groups</li>
                        <li>Successfully manages large client budgets or business units (including across offices, regions, companies)</li>
                        <li>Drives account growth and profitability</li>
                        <li>Mitigates potential risk to the business</li>
                        <li>Helps junior-mid staff understand the agency's business and financial management</li>
                        <li>Negotiates budgets, both internally and externally, to meet client needs</li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
    
    <div class="row odd-row">
        <div class="col-xs-3">
            <span>Staffing and Resource Planning</span>
        </div>
        <div class="col-xs-9">
            <section class="regular slider no-arrows">
                <div class="col-xs-4">
                    <ul>
                    	<li>Meets personal billable standards</li>
                        <li>Ensures all time is entered accurately and submitted by the end of each day</li>
                        <li>Acts judiciously with client and agency budgets</li>
                        <li>Adheres to financial practices and policies</li>
                    </ul>
                </div>
                <div class="col-xs-4">
                    <ul>
                        <li>Understands how to effectively and profitably staff accounts</li>
                        <li>Knows how to forecast staffing needs and communciates expectations effectively</li>
                    </ul>
                </div>
                <div class="col-xs-4">
                    <ul>
                        <li>Anticipates staffing needs</li>
                        <li>Effectively deals with account/business fluctuations to staff effectively and profitably</li>
                        <li>Effectively harnesses resources across the agency/DAS/OPRG</li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!-- <script type="text/javascript" src="https://cdnjs.com/libraries/jquery.SPServices"></script> -->

<script type="text/javascript">
    $(function() {
        $(".regular").slick({
        dots: false,
        infinite: false,
        /* mobileFirst:true, */
        slidesToShow: 2,
        slidesToScroll: 1,
        asNavFor: '.slider',
        responsive: [{
            breakpoint: 700,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                }
            }]
        });
        $('#section4').on('click', function(e) {
    		$('#collapseFour').resize();
		});
    });
</script>
</body>

</html>

2 个答案:

答案 0 :(得分：1)

您遇到的问题是 size-> width 会自动设置为 width：0px; ，因为区域是隐藏的。您可以使用$(".slick-slider").slick("refresh");解决问题，因此请在此处添加此内容：

  $('#section4').on('click', function(e) {
        $('#collapseFour').resize(); // I do not think, you need this.
        $(".slick-slider").slick("refresh");
  );

应该正常工作fiddle。

希望清楚。

答案 1 :(得分：0)

看起来您可能需要使用来初始化

variableWidth: true

您可以在CSS之后定义宽度

.slick-slide {width: 440px}
相关问题
最新问题