Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

143
Visualizações
Append Data on bootstrap carousel with ajax

I want to ask how I can append ajax data on the bootstrap carousel. 2 post-show on the bootstrap carousel when the page load for the first time then if someone clicks the next arrow bootstrap carousel slide and shows the next 2 posts I'm getting 2 posts per click with ajax now I want to append next 2 posts on the bootstrap carousel and so on like this

here's my blade code where I'm using foreach to show 2 posts when pages load for example I'm showing post 1 and 2 here

<div id="carousela" class="carousel slide" data-touch="false" data-interval="false">
    <div class="carousel-inner">
    @foreach($magazine->chunk(2) as $magazines)
        <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
        @foreach($magazines as $row)
            <div class="row no-gutters m-0 p-0">
                <div class="col-md-2 col-sm-12">
                    <img  src="{{(!empty($row->magazine_sys_file_name) ? asset('/uploads/'.$row->magazine_sys_file_name):'')}}" class="img-thumbnail border-0 p-0" alt="" srcset="">
                </div>
                <div class="col-md-10 col-sm-12 px-4 m-0 m-mb">
                    <h4 class="text-light m-0 p-0">{{$row->title}}</h4>
                    {{($row->magazine_des) ? $row->magazine_des: ''}}
                    <div><a href="{{$row->links}}" class="text-center text-warning float-right">{{__('Read More')}}</a></div>
                </div>   
            </div>
        @endforeach
        </div>
    @endforeach
    </div>
</div>

now I'm using onclick function to get the next 2 posts here's ajax code and with this code, i'm getting post 3 and 4 now I want to append these 2 posts on the bootstrap carousel

$('#nextclick').on('click',function(){
    var val = $('#hidden').val();
    var data = {val:val}
    $.ajax({
        url: "{{url('/user/nextmagazine')}}",
        method: 'get',
        data: data,
        success: function(data){
            $('#hidden').val(parseInt(val) + parseInt(2));
            
        }
    })
})

here's my result after onclick

enter image description here

if anyone can help me with how I can append this data in the ajax success function to show on the bootstrap carousel

Thank you

over 4 years ago · Santiago Trujillo
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda