<!-- Carousel -->
<section id="carousel_gadget" ]>
<div data-ng-click="toggleSettings()" data-ng-show="inEditMode" class="settings-cog">
<i class="fas fa-cog"></i> {{gadgetTitle}}
</div>
<div class="carousel d3-card d3-card-main d3-card-announcement">
<div class="carousel-inner">
<div class="feature" ng-model="slides" ng-hide="HideSlide">
<div id="jq" style="float: left;">
<img class="feature-img" data-ng-src="{{slides[currentItem].Image}}" alt="{{slides[currentItem].Title}}" data-ng-if="!slides[currentItem].IsPublishingImage" />
<div class="feature-content">
<div><a class="read-more-small-button" href="/sites/portal/Pages/Some_ShowAll.aspx">More</a></div>
<div class="eyebrow">List Data</div>
<div class="title"><a href="/sites/portal/Pages/Some_ReadMore.aspx?Listname=ListName&ItemID={{slides[currentItem].Id}}">{{slides[currentItem].Title | adjustlength:100}}</a></div>
<div class="date">{{slides[currentItem].Date | date:'MMMM d, y'}}</div>
<div class="blurb">{{slides[currentItem].Description | adjustlength:150}}</div>
<div class="button"><a href="/sites/portal/Pages/Some_ReadMore.aspx?Listname=ListName&ItemID={{slides[currentItem].Id}}">Read More</a></div>
</div><!-- feature content -->
</div>
<div class="counter">{{currentItem + 1}} of {{slides.length}} Amount of Data</div>
<div class="controls">
<div class="left-arrow" ng-click="PreviousRecord(false)"></div>
<div class="items">
<div id="s0" data-ng-class="isActiveSlide1(SlideZero)"><a href="#" ng-click="GoToRecord(SlideZero)">{{slides[SlideZero].Title | adjustlength:50}}</a></div>
<div id="s1" data-ng-class="isActiveSlide1(SlideOne)"><a href="#" ng-click="GoToRecord(SlideOne)">{{slides[SlideOne].Title | adjustlength:50}}</a></div>
<div id="s2" data-ng-class="isActiveSlide1(SlideTwo)"><a href="#" ng-click="GoToRecord(SlideTwo)">{{slides[SlideTwo].Title | adjustlength:50}}</a></div>
</div>
<div class="right-arrow" ng-click="NextRecord(false)"></div>
</div><!-- controls -->
</div><!-- feature -->
</div><!-- carousel inner-->
</div><!-- carousel -->
<gadget-carousel-settings></gadget-carousel-settings>
</section>
.carousel {
width: 798px;
display: block;
}
.carousel-inner {
padding: 10px 0px;
}
.feature {
background: white;
height: auto;
display: block;
clear: both;
float: left;
}
.feature-img {
width: 270px;
height: 240px;
background: #999;
display: inline;
float: left;
}
.feature-content {
display: inline;
width: 508px;
padding: 0px 0px 0px 20px;
display: inline;
float: left;
}
.feature-content .read-more-small-button {
margin-top: 0px !important;
}
.feature-content .more {
text-align: right;
display: inline-block;
float: right;
font-family: AktivGrotesk-Regular;
font-size: 14px;
line-height: 1.14;
text-align: right;
color: #000;
}
/*.feature-content .more::after {
content: "»";
vertical-align: bottom;
margin-top: -1px;
color: rgb(0, 0, 0);
background: 0px 0px;
padding: 0px;
content: "\f054";
font-family: FontAwesome;
margin-left: 5px;
font-size: 11px;
}*/
.feature-content .eyebrow {
line-height: 1.43;
letter-spacing: .8px;
font-family: AktivGrotesk-Regular;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
margin: 0;
padding-bottom: 16px;
width: 50%;
display: inline-block;
}
.feature-content .title {
font-family: 'Lyon Text Web';
font-weight: 700;
color: #000 !important;
margin: 0 0 9px;
letter-spacing: .2px;
display: -webkit-box;
height: auto;
font-size: 24px;
line-height: 26px;
}
.feature-content .title a {
text-decoration: none;
color: black;
}
.feature-content .title a:hover {
text-decoration: underline;
color: black;
}
.feature-content .date {
font-size: 13px;
font-family: AktivGrotesk-Regular;
font-weight: 400;
margin-bottom: 8px;
text-transform: none;
line-height: 1.43;
letter-spacing: .2px;
}
.feature-content .blurb {
text-transform: none;
font-weight: normal;
font-size: 15px;
font-family: Lyon Text Web;
letter-spacing: normal;
}
.feature-content .button a {
display: block;
width: 115px;
height: 32px;
line-height: 32px;
text-align: center;
background: #000;
text-decoration: none;
padding: 0;
font-size: 14px;
font-weight: 700;
letter-spacing: -.5px;
color: #fff;
margin-top: 10px;
font-family: AktivGrotesk-Regular;
}
.feature-content .button a:hover {
background: #32d700;
}
div .feature {
transition: all linear 10.5s;
}
.ng-hide {
height: 0;
width: 0;
background-color: transparent;
top: -200px;
left: 200px;
}
.counter {
display: block;
clear: both;
font-size: 11px;
font-family: AktivGrotesk-Regular;
font-weight: 400;
padding: 8px 0px 8px 20px;
text-transform: none;
line-height: 1.43;
letter-spacing: .2px;
}
.controls {
height: 80px;
background: #fff;
width: 100%;
margin: 0 auto;
display: block;
clear: both;
}
.controls .items {
width: 100%;
}
.controls .items > div.active {
border-top: 1px solid #32d700;
}
.controls .items > div {
width: 225px;
height: 100%;
display: inline;
float: left;
padding: 8px;
margin: 0 8px;
border-top: 1px solid #000;
vertical-align: top;
font-size: 15px;
line-height: 20px;
text-align: left;
color: #000;
font-family: 'Lyon Text Web';
letter-spacing: .2px;
font-weight: 700;
}
$scope.slideDiv.effect("slide", { direction: 'right' }, 400);
the customer is always right, yes?Not always, I have convinced many to ignore IE11. My philosophy is if we pander to the likes of Microsoft who make the development effort that much more difficult they won't change.
$scope.ShowSlideDiv = function() {
$scope.slideDiv.show();
//Uncommenting these lines and commenting the line above breaks the carousel
//Requires jQuery-UI
//if ($scope.slideDiv) {
// $scope.slideDiv.effect("slide", {
// direction: 'right'
// }, 400);
// }
};
$scope.ShowSlideDiv = function() {
// I added this as a substitute for the jQuery UI slide effect ---> $scope.slideDiv.show();
//Requires jQuery-UI
if ($scope.slideDiv) {
$scope.slideDiv.effect("slide", {
direction: 'right'
}, 400);
}
};
$interval(function() {
//$scope.value++;
$scope.AutoNextRecord(true);
}, 2000);
//$scope.StartShow();
$scope.StartShow();
The other browsers do have the problem as I mentioned in my earlier email - just not as pronounced. I am guessing just different browser rendering strategies.
As to the Plunker - I would open a separate question for that. I downloaded your source and got it working locally.
You are welcome.
If Edge it is worth pursuing - if it is IE it is (in my view) not.