I am wondering, I did not find carousel component in Semantic UI.
I feel it is very common and useful component.
I know one option OWL Carouse. I do not want to use jQuery, though for Semantic UI I will just include jQuery. Rest of the things I want to achieve via Angular.
I need to know the possible options without writing jQuery code.
Semantic UI evidently does not currently have a carousel module, and it is an open issue.
There are, however, some small snippets on that page that can achieve what you'd like to. See slick and Swiper.
Here is another alternative.
fotorama.io
yes there is no carousel in Semantic UI at moment but you can use cards somewhat similar here is one I found to be closest to bootstrap carousel;
<div class="ui card">
<div class="ui slide masked reveal image">
<img src="/images/avatar/large/jenny.jpg" class="visible content">
<img src="/images/avatar/large/elliot.jpg" class="hidden content">
</div>
<div class="content">
<a class="header">Team Fu & Hess</a>
<div class="meta">
<span class="date">Created in Sep 2014</span>
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
2 Members
</a>
</div>
</div>
hope this helps,
cheers.
Here is the link you can create a coursel in semantic ui.
https://codesandbox.io/s/43pv7wm6n9
Hopefully it will help you.
Related
Im working on a project where I want to use a carousel to display some different content. I will not create the slides dynamically using an ng-repeat, this is because I have to move some of the content from other parts of the DOM into the slide.
I want to have some links with title connected to each slide, so if I click that link it should scroll to that slide. I have managed to do this, but the sliding behaviour is not as expected. Here is a plunker in which the weird behaviour is displayed: http://plnkr.co/edit/oZrLzRaLb5cAmMBnz4p0?p=preview
<div ng-controller="CarouselDemoCtrl as car">
<a ng-click="car.active = 0">Slide 1</a>
<a ng-click="car.active = 1">Slide 2</a>
<a ng-click="car.active = 2">Slide 3</a>
<uib-carousel ng-model="" active="car.active" interval="0" no-wrap="true" no-transition="false">
<uib-slide index="0">
<div style="background:blue; height:600px;">
Some content in here
</div>
</uib-slide>
<uib-slide index="1">
<div style="background:red; height:600px;">
Some content in here as well
</div>
</uib-slide>
<uib-slide index="2">
<div style="background:green; height:600px;">
Some cool content in here
</div>
</uib-slide>
</uib-carousel>
</div>
Any thoughts of why this happens, and how I can solve it?
Note: Im using angular 1.5.0 and ui-bootstrap 1.2.4
Best regards,
Daniel
have you install ng animation,
or you don't want to sliding you could edit the transition="true" to disable it
<uib-carousel ng-model="" active="car.active" interval="0" no-wrap="true" no-transition="true">
https://github.com/angular-ui/bootstrap/issues/5601
Issue seems to be in the angular-ui code itself;
In the $watch of 'active' "currentIndex = index;" is set before "self.select(slides[index]);" is run, by moving it down after it it'll work
I am creating hybrid application and i am facing issue in ng-repeat with native scrolling.
Below are my template file code
<ion-view align-title="center">
<ion-content class="ionic headerWithNav" overflow-scroll='true'>
<ul>
<li ng-repeat="lessondata in AllLessonComing" ng-class="{true: 'showBg', false: ''}[(AllLessonComing).length>0]" ng-click="lessondetailsPage('{{lessondata.id}}')">
<div class="lesson-wrap">
<div class="lesson-img">
<div class="lession-price"> <span>{{lessondata.price}}</span> </div>
<div class="lessonImg-wrap"><img image-lazy-src="{{lessondata.image}}" lazy-scroll-resize="true" image-lazy-loader="bubbles" class="ink" on-finish-render="ngRepeatFinished"/></div>
</div>
<div class="lessonInfo">
<div class="row">
<div class="col col-67">
<h1>{{lessondata.title}}</h1>
<div class="lesson-status">{{lessondata.category_name}}</div>
<div class="row">
<div class="col lesson-location">{{lessondata.City}}</div>
<div class="col">
<div class="lesson-rating"><img src="img/start-rating.jpg"></div>
</div>
</div>
</div>
<div class="col padr-none">
<div class="trainnerImg-wrap">
<div class="trainee-img"> <img src="{{lessondata.coach_image}}"> </div>
<div class="trainee-name">{{lessondata.coach_name}}</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li ng-show="(AllLessonComing).length == 0">
<div class="inner-container"><div class="no-results">No Lesson Found</div></div>
</li>
</ul>
</ion-content>
</ion-view>
As you can see i am using "overflow-scroll='true'" for native scrolling and ng-repeat for the showing my lessons.
This is an image when scope data render first time--
when scope data render first time
And this is an image when i scroll speedily when i scroll speedily
ISSUE:- I don't know why these images and text are reloading or flickering when i scroll speedily
My Code is correct.
ng-repeat was creating issue with the ionic 1.0. Now ionic released new version that is ionic 1.2 and you will see that this issue has been resolved by ionic's developers.
you can update your ionic version easily.
If you are using NPM then use this command
ionic lib update
Check brower.JSON file in www/lib/ionic/ folder. if brower.JSON exists then remove this file.
you will see the mazik of ionic 1.2.
This issue happens on hybrid app. The longer list (and images) the more lag it has. As I can see you are using Ionic, try to use ion-list instead. It could help create a better list view.
p/s: sorry I was not able to made a comment (not enought rep point). So I post it here. Hope it help!
Two more suggestion:
Use angular bindonce to reduce $watchers and faster render
If you are building your app using ionic build for Android, you could use built-in Crosswalk for a stronger webview of your app
I'm looking for a Angular Carousel there is working with Bootstrap divs
I want it to shift between Divs, and I get the next div in center when clicking next or previous.
Bootstrap exsampel til wrap with carousel:
<div class="row">
<!-- Carousel start -->
<div class="col-md-1 col-sm-6">
<div class="box box-lg br-black animated">
<div class="box-content box-default">
Functionality 1
</div>
</div>
</div>
<div class="col-md-8 col-sm-6">
<div class="box box-lg br-black animated">
<div class="box-content box-default">
Functionality 2
</div>
</div>
</div>
<div class="col-md-1 col-sm-6">
<div class="box box-lg br-black animated">
<div class="box-content box-default">
Functionality 3
</div>
</div>
</div>
<!-- Carousel end --></div>
What possibilities do I have?
your question is a little confused to me. I understood your question but the code show something different. I will try to answer you the question with several alternatives. If you could be more specific with your problem I will help you quickly.
First, there are several carousel for AngularJS. There are single libraries that creates carousel, and others like ui-bootstrap(angular-ui) and AngularStrap that fit much better with Twitter Bootstrap. If you want to use AngularJS with TB, I recommend you ui-bootstrap. I have worked several times with the library and never let me down.
So, creating the carousel with ui-bootstrap we have several alternatives. First, to place the content of your divs in the center you have not use the grid system obligatory. You can use a single row and center the elements with text-align, margin:0 auto, flex model or others techniques. In this case check the next plunk:
http://plnkr.co/edit/XmzaJx5mXddLQ4S1k7BV
If you want to create each div with columns of the grid system, like your code shown, you have to shift the columns with .col-md-offset-x, leaving the same space at the sides. Check the plunk.
http://plnkr.co/edit/ihpwrWC0p64eO1jiddl2
I hope that my answer help you at least a little, If your question is another please, let me know.
The way accordion is built is one accordion below another
I want to be able to make them side by side.
I have a button that will open/close everyone at once.
I tried adding a span above the accordion-group but it didn't help.
<div id="top-panel" style="height:auto;border-bottom-style: outset;">
<accordion close-others="false">
<span ng-repeat="widget in _widgets">
<accordion-group id="widgetsAccordion" heading="{{widget.name}}" is-open="widget.isOpen">
moo
<button ng-click="getPreviewContent('{{widget.postId}}')">{{widget.name}}</button>
</accordion-group>
</span>
</accordion>
</div>
<div id="bottom-panel">
<div id="feed-panel" style="height:580px;width:1075px; float: left;border-right-style:outset;">
<button class="btn btn-primary" ng-click="toggleCollapse()">collapse</button>
</div>
<div id="preview-panel" style='float:right; width:570px;'>
<ng-include src="htmlInclude" />
</div>
</div>
How can I achieve this?
[edit]:
I realize I might not have explained this correctly.
I want the accordions to be VERTICAL, but just for them to be located side-by-side
[solution]:
Well the solution was pretty simple, just added style="display:inline-block" to the accordion-group. cheers
Well the solution was pretty simple, just added
style="display:inline-block" to the accordion-group.
cheers
I have come across a plugin called zAccordian.
http://www.armagost.com/zaccordion/
It is a horizontal accrodian, i think this should suffice for your needs.
If you would like to have that all tabs open with one click, there is a start parameter that can be passed through. Not sure how familiar you are with JQuery but this should do the trick.
Regards,
Warren
I am using semantic ui accordion in my template of my angular js project.
<div class="ui accordion">
<div class="active title">
<i class="dropdown icon"></i>
What is a dog?
</div>
<div class="active content">
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
Content
</div>
<div class="active content">
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
</div>
The problem is both the contents are in open state, without having a necessity to click on the accordion to open. What is the change I need to do?
There are four things you might check:
1) Remove the 'active' class from the last div in your markup since it makes its content visible.
2) You need to initialize the accordion via
$('.ui.accordion').accordion();
See the usage information on the Semantic UI accordion page:
http://semantic-ui.com/modules/accordion.html#/usage
3) You will also need to include the Semantic UI javascript files.
4) Since you said you use the accordion in a template, you have to wrap the initializtion inside a script inside the template or (the angular way) write a short directive which will invoke the accordion initialization on the element for you.